Edit HTML Content

[aswinsiddaling2]

Hi All,

I am trying a logic on one of our UI pages where we have a icon which when clicked will make another HTML element editable. For ex:

UI page:

<table>

  <tbody>

  <tr>

  <td style="padding-right:10px;" id="member_name">Name</td>

  <td style="padding-right:10px;">Class</td>

  <td style="padding-right:10px;">

  <a href="#" onclick="editName();"><img src="edite.png" width="15" height="15" /></a>

  </td>

  </tr>

  </tbody>

  </table>

Client Script:

function editName() {

  var gotnm = gel("member_name");

  gotnm.style.color="red" ;

  gotnm.contenteditable="true" ;

}

But when I click on the icon, the Name is colored but it does not become editable

But if I use, contenteditable="true" for the the first <td> it becomes editable everytime. How can I achieve it only on click of the icon and once I edit, I should be able to fetch the old value and the new value.

Please let me know if anyone has any idea. Thanks in advance!

[ChrisBurks · Accepted solution]

Aswin,

This is where an input element would have been a bit better to work with. However, here is one way of doing it.

<table>

  <tbody>

  <tr>

  <td style="padding-right:10px;" id="member_name" contenteditable='false' onmouseleave="getNew()">Name</td>

  <td style="padding-right:10px;">Class</td>

  <td style="padding-right:10px;">

  <a href="#" onclick="editName();"><img src="edite.png" width="15" height="15" /></a>

  </td>

  </tr>

  </tbody>

  </table>

var gotnm = gel("member_name");

function editName() {

  var oldValue = gotnm.innerHTML;

  gotnm.style.color="red" ;

  gotnm.setAttribute('contenteditable',true );

  console.log("oldValue", oldValue);

}

function getNew(){

  var newValue = gotnm.innerHTML;

  console.log("new Val", newValue);

}

Notice the mouseleave kicking off the "getNew()" function. Also notice how "innerHTML" is used because a "td" element doesn't inheritly have the "value" attribute like an form input

[aswinsiddaling2]

Thanks Chris for your time!!