Question

我一直在摸不着为什么我的代码按原样行事。

我的问题是，为什么当我使用我的函数addRow添加表格行时，它会重置前一行的所有输入值？

以下是显示我的问题的代码段。

function addRow() {
   //the html for adding a row (contains the row tag and inputs)
   htmlString = '<tr><td><input type="text"></input></td></tr>';
   //add the html string to the tbody of the tableTestSamples
   document.getElementById("testTable").getElementsByTagName("tbody")[0].innerHTML += htmlString;
}

<table id="testTable">
  <tbody>
    <tr>
      <td>
        <input type="text"></input>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <input type="button" onclick="addRow()" value="Add Row"></input>
      </td>
    </tr>
  </tfoot>
</table>

它添加了一行..除了重置之前输入的任何值。这是为什么？

谢谢！

Answer 1

问题在于您正在改变表格的innerHTML。这会导致浏览器将表的内容视为HTML字符串，重新分析HTML，然后替换表的内容。由于浏览器不会更新innerHTML以反映输入到输入标记中的值，因此这些值会在此过程中丢失。

要避免重置输入值，您需要操作DOM，而不是操纵底层源代码。您仍然可以使用HTML来创建新行，但需要使用以下函数将其添加到表中：appendChild()。

示例：

＆＃13;

function addRow() {
  var row = document.createElement('tr');
  row.innerHTML = '<td><input></td>';

  var table = document.getElementById('the-table');
  table.appendChild(row);
}

＆＃13;

<table id="the-table">
  <tr>
    <td><input></td>
  </tr>
</table>
<button onclick="addRow()">Add Row</button>

＆＃13;

在HTML和Javascript中添加带输入的行时，表输入值重置

1 个答案: