javascript - 如何根据 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

只需获取您的输入值并将其设置为目标单元格的 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>