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

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>

这就是我当前的代码所做的:当用户点击单元格时,它会将其替换为文本框中的当前文本,这很棒,但是当您尝试编辑文本时,它会再次调用该函数,将文本替换为"空值".请帮我解决这个问题!

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>

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

IE浏览器:

在IE中有一个奇怪的"错误",它不允许表格单元格可编辑^{_{(为什么,微软？)}}所以你必须用a包装你的内容<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>