javascript当中创建table的TD和创建TR的方法

本文链接：https://blog.youkuaiyun.com/mark_to_win/article/details/88681275

本文介绍了一个使用JavaScript动态生成HTML表格的方法。通过循环迭代和`appendChild`方法，可以将数据逐条添加到HTML表格中，实现表格内容的动态更新。示例展示了如何创建表格行并将其插入到指定的`<tbody>`元素内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例 2.3（CreateTRTDIEFF.html）

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<body>
<table border="1" >
    <tr>
        <td>id</td>
        <td>姓名</td>
    </tr>
      <tbody id="display">
        </tbody>
</table>

</body>
</html>
<script type="text/javascript">
    for (var i = 0; i < 3; i++) {
        var data = ['1', 'qixy'];
        var newRow = generaARow(data);
        var displayTable = document.getElementById("display");
        /*
         TBODY object (Object/HTML)
         An object that encapsulates a <TBODY> tag within a <TABLE> block. Inherits from: Element object,Element object (Object/HTML)
         Inherits from: Node object.
         Node.appendChild() (Method)
         A new child node object is added to the end of the list of immediate children of this node.
         JavaScript syntax: - myNode.appendChild(aNode)
         Argument list: aNode The node to be appended
         */
        displayTable.appendChild(newRow)
    }
    function generaARow(data) {
        var row, cell, txtNode;
        /*
         var a=document.createElement("div"); "div" also is a known element. you can not write as "divxxx". the same thing, we can use "table","select","option" ,etc.
         Document.createElement() (Method)
         A method to create a new element within a document.
         return value is: Element object. Element object is a subclass of Node.
         */
        row = document.createElement("tr");

更多请见：https://blog.youkuaiyun.com/qq_44594371/article/details/103064052