Я ломал голову над тем, почему мой код работает именно так.

Мой вопрос в том, почему, когда я добавляю строку таблицы с помощью функции 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>

Он добавляет строку .. за исключением сброса любых ранее введенных значений. Это почему?

Благодарность!

0
Griffin Bender 14 Фев 2018 в 21:56

1 ответ

Лучший ответ

Проблема в том, что вы изменяете innerHTML таблицы. Это заставляет браузер обрабатывать содержимое таблицы как строку HTML, повторно анализировать HTML и затем заменять содержимое таблицы. Поскольку браузер не обновляет innerHTML для отражения значений, введенных во входной тег, эти значения будут потеряны в этом процессе.

Чтобы избежать сброса входных значений, вам нужно манипулировать DOM, а не управлять исходным кодом. Вы по-прежнему можете использовать HTML для создания новой строки, но вам нужно добавить ее в таблицу, используя такую ​​функцию, как: appendChild().

Примере:

function addRow() {
  var row = document.createElement('tr');
  row.innerHTML = '<td><input></td>';

  var table = document.getElementById('the-table');
  table.appendChild(row);
}
<table id="the-table">
  <tr>
    <td><input></td>
  </tr>
</table>
<button onclick="addRow()">Add Row</button>
2
Hargo 14 Фев 2018 в 22:08