使用 Javascript 动态添加表格行和单元格答案

【问题标题】：Adding Tables Rows and Cells Dynamically Using Javascript使用 Javascript 动态添加表格行和单元格
【发布时间】：2018-01-01 20:33:44
【问题描述】：

我试图使用 Javascript 在我的 HTML 表格中添加一个包含数据的表格行，但它似乎无法添加。这是为什么？

<html>
 <head>
  <title>
  </title>
   <script>
    function addUser(){
        var tbl = document.getElementById('datatable');
        var lastRow  = tbl.rows.length;

        var iteration = lastRow+1;
        var row = tbl.insertRow(lastRow);

        var cellLeft = row.insertCell(0);
        var textNode = document.createTextNode(iteration);
        cellLeft.appendChild(textNode);     
    }
   </script>
 </head>
  <body>
    <table border = 1 id = "datatable">
        <tr>
         <td>ID</td>
         <td>NAME</td>
         <td>ADDRESS</td>
        </tr>
        <tr>
         <td>1</td>
         <td>Something</td>
         <td>Something</td>
        </tr>
        <tr>
         <td>2</td>
         <td>Foo</td>
         <td>bar</td>
        </tr>
    </table>

    <form id = "myForm" onsubmit = "addUser()">
    ID:<input type = "text" name = "txtID"><br />
    NAME:<input type = "text" name = "txtName"><br />
    ADDRESS:<input type = "text" name = "txtAddress"><br />
    <input type = "submit" value = "Add Item">
    </form>
  </body>
</html>

【问题讨论】：

不知道怎么看错误，我用的是google chrome
ctrl-shift-j 显示 javascript 控制台

标签： javascript dynamic html-table ecmascript-5 onsubmit

【解决方案1】：

您需要的不是提交表单只需一个 onclick 事件就可以提供帮助。

<input type = "button" value = "Add Item" onclick="addUser()">

【讨论】：

【解决方案2】：

这是因为您要提交表单。首先，您的 AddUSer 被调用并运行，但页面被重新加载，您看到的是初始页面。

【讨论】：