这就是我想要做的事：我有一个表，从Javascript在每个小区内的用户输入创建的。此表只是为了确认由用户输入的数据是正确的。如果用户看到一个错误，他们点击哪些需要编辑的单元格，它把一个文本框，表格单元格与当前单元格的数据。然后，用户就可以提交更改，或者如果他们点击了错误的小区放弃更改。这是目前我有：

    <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>abc@123.com</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>

这是我当前的代码所做的：当用户点击该细胞，它具有一个文本框里面的当前文本，这是伟大的替换它，但是当你尝试编辑的文本，它在再次替换文本调用函数“空值”。请帮我想出解决办法！

Answer 1:

这是造成事件冒泡。你不想onclick适用于input ，但不幸的是，这是不是这样的。为了解决这个问题，只要做到这一点（摘自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>abc@123.com</td> </tr> <tr> <th>Phone</th> <td>123-456-7890</td> </tr> </table>

为什么用JavaScript做时，简单的HTML可以做同样的事情？ ;)

IE浏览器：

有一个奇怪的“错误”在IE中，它不会允许一个表格单元格是可编辑的^{_{（为什么，微软？）}}所以，你有一个包裹内容<div>摘自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>abc@123.com</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>abc@123.com</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>

增加了一个，如果在update（）函数声明。将其改为：

<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>

这就像一个魅力！

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:

动态改变表行值：

变种表=的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;
       }
   }

上面的例子中的复选框必须需要我们用此复选框以获得动态表格当前编辑行值的每个row.then。

文章来源: Dynamically change table cell with user input in Javascript