Как добавить новую строку в таблицу из пользовательского ввода в HTML

Question

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

Это мой код:

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}

table,
td {
  border: 1px solid black;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

Но результатом этого кода является то, что когда пользователь нажимает кнопку «Добавить», он всегда показывает «NEW CELL 1» и «NEW CELL 2». У меня вопрос, как изменить код, особенно:

cell1.innerHTML = "NEW CELL1";
        cell2.innerHTML = "NEW CELL2";

Так что, из таблицы можно получить входные данные от пользователя?

Answer 1

Вам нужны некоторые формы ввода, чтобы позволить вам вводить текст, вот очень простой пример для начала:

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = document.querySelector('#newCellOneText').value;
  cell2.innerHTML = document.querySelector('#newCellTwoText').value;
}

table,
td {
  border: 1px solid black;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

Cell 1 Text: <input type="text" id="newCellOneText" /><br/>
Cell 2 Text: <input type="text" id="newCellTwoText" /><br/>
<button onclick="myFunction()">Try it</button>

Answer 2

Просто возьмите ваше входное значение и установите его в качестве значения html для целевых ячеек

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = document.getElementById('cellOne').value;
  cell2.innerHTML = document.getElementById('cellTwo').value;
}

table,
td {
  border: 1px solid black;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<input type='text' id='cellOne' />
<input type='text' id='cellTwo' />

<button onclick="myFunction()">Try it</button>