5

这就是我想要做的：我有一个表格，由 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>

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

4

4 回答 4

11

它是由事件冒泡引起的。您不想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 中有一个奇怪的“错误”，它不允许表格单元格可编辑（为什么，微软？）所以你必须用一个<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>

于 2013-02-09T22:44:53.363 回答
0 
<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>

这就像一个魅力！

于 2013-02-09T23:41:44.237 回答
0 
    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.
于 2013-12-26T09:05:14.517 回答
0

动态更改表格行值：

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

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

于 2013-12-26T09:10:29.867 回答