将数据附加到html表

Question

我正在尝试使用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
汤姆·克鲁斯
............
............
............
............

Answer 1

这应该使您入门。

 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

Answer 2

您要使用appendchild。 查看此示例以获得一些好示例https://www.w3schools.com/jsref/met_node_appendchild.asp 。 您想遍历数据，向表中添加一行，一次添加一行

Answer 3

您可以使用与尝试的方法类似的方法：获取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>

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

 appendButton.addEventListener('click', (event) => { let frag = document.createDocumentFragment(); let tr = document.createElement('tr'); let 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>

Answer 4

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

    <!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);
}`

我希望这可以帮助你：）

将数据附加到html表

问题描述

style.js使用如下：

预期结果：

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

4 个解决方案

解决方案1
2 已采纳 2018-10-25 21:08:42

解决方案2
0 2018-10-25 20:54:30

解决方案3
0 2018-10-25 21:11:41

解决方案4
0 2018-10-25 21:27:02

将数据附加到html表

问题描述

style.js使用如下：

预期结果：

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

4 个解决方案

解决方案1 2 已采纳 2018-10-25 21:08:42

解决方案2 0 2018-10-25 20:54:30

解决方案3 0 2018-10-25 21:11:41

解决方案4 0 2018-10-25 21:27:02

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

解决方案1
2 已采纳 2018-10-25 21:08:42

解决方案2
0 2018-10-25 20:54:30

解决方案3
0 2018-10-25 21:11:41

解决方案4
0 2018-10-25 21:27:02