将数据附加到 html 表答案

【问题标题】：Append data to html table将数据附加到 html 表
【发布时间】：2023-03-30 11:28:01
【问题描述】：

我正在尝试使用 JavaScript 将更多数据添加到下表中。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Home Page</title>
    <script type="text/javascript" src="assets/style.js"></script>
  </head>
  <body>

      <br><br><br><br><br>

      <input type="text" id="personName" autofocus>
      <button type="button" onclick="addData();">Append Information</button>   <br><br><br><br><br>

      <table>
        <tr>
          <th>Client Name</th>
        </tr>


          <tr>
            <td>James Bond 007</td>
          </tr>

          <div id="addDataHere">

          </div>

      </table>
  </body>
</html>

使用的style.js如下：

function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "<tr><td>" + personName + "</tr></td>";



}

预期输出结果：

客户姓名
詹姆斯·邦德 007
汤姆·克鲁斯
....
....
. ……
…………

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

您可以使用类似于您尝试的方法：获取innerHTML，附加一些新的html，然后替换innerHTML。但是，您需要获取 table 的 innerHTML（不是嵌套在其中的元素）。

例如（将您的 button onclick 替换为事件监听器）。

const personName = document.getElementById('personName');
const appendButton = document.getElementById('appendButton');
const nameTable = document.getElementById('nameTable');
appendButton.addEventListener('click', (event) => {
  let content = nameTable.innerHTML;
  content += '<tr><td>' + personName.value + '</td></tr>';
  nameTable.innerHTML = content;
});

<input type="text" id="personName" autofocus>
<button type="button" id="appendButton">Append Information</button>
<table id="nameTable">
  <tr>
    <th>Client Name</th>
  </tr>
  <tr>
    <td>James Bond 007</td>
  </tr>
</table>

根据您正在做的事情的复杂性，如果您还使用createDocumentFragment，则走其他答案中建议的createElement / appendChild 路线可能会更快。另一个例子：

appendButton.addEventListener('click', (event) => {
  const frag = document.createDocumentFragment();
  const tr = document.createElement('tr');
  const td = document.createElement('td');
  td.appendChild(document.createTextNode(personName.value));
  tr.appendChild(td);
  frag.appendChild(tr);
  nameTable.appendChild(frag);
});

<input type="text" id="personName" autofocus>
<button type="button" id="appendButton">Append Information</button>
<table id="nameTable">
  <tr>
    <th>Client Name</th>
  </tr>
  <tr>
    <td>James Bond 007</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您可以使用列表来匹配您需要的代码

    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Home Page</title>

</head>
<body>
  <input type="text" id="personName" autofocus>
  <button type="button" onclick="addData();">Append Information</button> 
    <p>Client Name</p>
  <ul id="mylist">
        <li>James Bond 007</li>
    </ul>


    <script type="text/javascript" src="main.js"></script>
</body>
</html>

以及像这样使用 adddata() 函数代码 `function addData(){

    var mylist=document.getElementById("mylist");
    var personName=document.getElementById("personName").value;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(personName);
    node.appendChild(textnode);
    mylist.appendChild(node);
}`

希望对你有帮助:)

【讨论】：

【解决方案3】：

这应该可以帮助您入门。

function addData() {
    var personName = document.getElementById("personName").value;
    var newRow = document.createElement("tr");
    var newCell = document.createElement("td");
    newCell.innerHTML = personName;
    newRow.append(newCell);
    document.getElementById("rows").appendChild(newRow);
    document.getElementById("personName").value = '';
}

    <input type="text" id="personName" autofocus>
    <button type="button" onclick="addData();">Append Information</button> <br><br><br><br><br>

    <table>
        <tr>
            <th>Client Name</th>
        </tr>
        <tbody id="rows">
            <tr>
                <td>James Bond 007</td>
            </tr>
        </tbody>
    </table>

您在正确的路径上，但重要的一点是您试图在表格中使用 div。表格具有非常特定的结构，如果您希望它正确呈现，则必须对其进行匹配。

您可以将 div 元素放在 td 或 th 内，但不能放在 table 元素本身内。看看这个链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

【讨论】：

【解决方案4】：

你想使用 appendchild。看看这个很好的例子https://www.w3schools.com/jsref/met_node_appendchild.asp。您想循环遍历向表中添加一行的数据，一次一行

【讨论】：

谢谢，我现在就看看。 @西蒙柯蒂斯
另外，也请查看 YouTube。我在不同的初学者教程中见过这种事情几次。祝你好运！

使用的style.js如下：

预期输出结果：

客户姓名 詹姆斯·邦德 007 汤姆·克鲁斯 .... .... . ………………

客户姓名
詹姆斯·邦德 007
汤姆·克鲁斯
....
....
. ……
…………