Internet Explorer：

Question

这就是我要做的事情：我有一个表，是从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>

这是我当前的代码所做的：当用户点击单元格时，它会将其替换为文本框中的当前文本，这很棒，但是当您尝试编辑文本时，它会再次调用该函数替换带有“null”的文本。请帮我解决这个问题！

Answer 1

由event bubbling引起。您不希望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>

为什么simple HTML可以做同样的事情时使用JavaScript？ ;)

Internet Explorer：

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（）函数中添加了if语句。将其更改为：

<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

动态更改表格行值

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

上面的示例每行必须有一个复选框。然后我们使用此复选框来获取动态表中的当前编辑行值。

使用Javascript中的用户输入动态更改表格单元格

4 个答案:

Internet Explorer：