Dynamically change table cell with user input in Javascript

Question

This is what I am trying to do: I have a table created from Javascript with user input in each cell. This table is intended only to confirm the correctness of the data entered by the user. If the user sees an error, they click on the cell that needs to be edited and places the text field in the table cell with the current cell data. Then the user will be able to submit the changes or discard the changes if they clicked on the wrong cell. I currently have:

<table id = "confirm"> <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr> <tr><th>Lastname</th><td>Smith</td></tr> <tr><th>Username</th><td>ASmith</td></tr> <tr><th>Email</th><td> [e-mail] </td></tr> <tr><th>Phone</th><td>123-456-7890</td></tr> </table> <script type = "text/javascript"> function update(id){ //Get contents off cell clicked var content = document.getElementById(id).firstChild.nodeValue; //Switch to text input field document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>"; } </script> 

This is what my current code does: when a user clicks on a cell, he replaces it with the current text inside the text box, which is fine, but when you try to edit the text, he calls the function again, replacing the text with "zero". Please help me figure this out!

Answer 1

This is caused by a bubbling event . You did not want onclick applied to input , but unfortunately this is not the case. To solve this problem, just do it (taken from http://jsfiddle.net/DerekL/McJ4s/ )

 table td, th{ border: 1px solid black; } 

 <table id="confirm"> <tr> <th>Firstname</th> <td contentEditable>Adan</td> </tr> <tr> <th>Lastname</th> <td>Smith</td> </tr> <tr> <th>Username</th> <td>ASmith</td> </tr> <tr> <th>Email</th> <td> [e-mail] </td> </tr> <tr> <th>Phone</th> <td>123-456-7890</td> </tr> </table> 

Why is this with JavaScript when plain HTML can do the same? ;)

---

Internet Explorer:

In IE, there is a strange "error" that does not allow editing a table cell ^{_{(why, Microsoft?)}} . So you need to wrap the content with <div> (taken from http://jsfiddle.net/DerekL/McJ4s/3/ ):

 table td, th { border: 1px solid black; } 

 <table id="confirm"> <tr> <th>Firstname</th> <td> <div contenteditable>Adan</div> </td> </tr> <tr> <th>Lastname</th> <td>Smith</td> </tr> <tr> <th>Username</th> <td>ASmith</td> </tr> <tr> <th>Email</th> <td> [e-mail] </td> </tr> <tr> <th>Phone</th> <td>123-456-7890</td> </tr> </table> 

Answer 2

 <table id = "confirm"> <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr> <tr><th>Lastname</th><td>Smith</td></tr> <tr><th>Username</th><td>ASmith</td></tr> <tr><th>Email</th><td> [e-mail] </td></tr> <tr><th>Phone</th><td>123-456-7890</td></tr> </table> <script type = "text/javascript"> function update(id){ //Get contents off cell clicked var content = document.getElementById(id).firstChild.nodeValue; //Switch to text input field document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>"; } </script> 

Added if statement in update () function. Modified by:

 <script type = "text/javascript"> function update(id){ if(document.getElementById(id).firstChild != "[object HTMLInputElement]"){ //Get contents off cell clicked var content = document.getElementById(id).firstChild.nodeValue; //Switch to text input field document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>"; } } </script> 

It works like a charm!

Answer 3

  var table = document.getElementById(''); var rowCount = table.rows.length; var noRowSelected = 1; for(var i=1; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { break; } document.getElementById("").value = row.cells[1].innerHTML; document.getElementById("").value = row.cells[2].innerHTML; document.getElementById("").value = row.cells[3].innerHTML; document.getElementById("").value = row.cells[4].innerHTML; } } The Above Example the checkbox must be need for the each row.then we used this check box to get the current edit row values in the dynamic table. then to use the id for edit field to set valued got from the table. 

Answer 4

Dynamically changing a table row value:

var table = document.getElementById ('');

 var rowCount = table.rows.length; var noRowSelected = 1; for(var i=1; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { break; } document.getElementById("").value = row.cells[1].innerHTML; document.getElementById("").value = row.cells[2].innerHTML; document.getElementById("").value = row.cells[3].innerHTML; document.getElementById("").value = row.cells[4].innerHTML; } } 

In the above example, a checkbox should be needed for each row. Then we used this checkbox to get the current values ​​of the edit lines in the dynamic table.