将数据附加到html表

时间：2018-10-25 20:44:33

标签： javascript html html-table

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

4 个答案:

答案 0 :(得分：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

答案 1 :(得分：0)

您要使用appendchild。检查一下一些 很好的例子https://www.w3schools.com/jsref/met_node_appendchild.asp。您想遍历数据，向表中添加一行，一次添加一行

答案 2 :(得分：0)

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

例如（用事件监听器替换了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 createElement，则走其他答案中建议的appendChild / createDocumentFragment路线可能会更快。另一个例子：

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>

答案 3 :(得分：0)

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

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

希望对您有所帮助：）

相关问题
最新问题