javascript当中，如何创建一个table的row和cell？

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

本文通过示例介绍如何使用JavaScript动态创建HTML表格的行（row）和单元格（cell）。通过`document.createElement`创建`table`元素，并利用`TABLE.insertRow`方法插入行，再用`TR.insertCell`插入单元格。示例中展示了如何为表格添加边框并进行多行多列的插入操作。

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

例 2.2（CreateTRTD3IEFF.html）

<HTML>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <TITLE></TITLE>
</HEAD>
<BODY id="body">
</BODY>
</HTML>
<script>
    /*Node.appendChild() (Method)
     A new child node object is added to the end of the list of immediate children of this node. 马克-to-win: note: immediate is very important, table and tr is not immidiate,so table can not appendChild tr, while, table can append tbobdy, then tbody append tr. if you really want to connect table and tr, you must use insertRow like in this example.

     Document.createElement() (Method)
     A method to create a new element within a document.
     Property/method value type: Element object
     */
    var table = document.createElement("table");
    /*TABLE.border (Property)
     The width of the border around cells in a table.
     */
    table.border=2;
    //为表格循环插入2行
    for (var i = 0 ; i < 2 ; i++)
    {
        /*
         TABLE.insertRow() (Method)
         Insert a new row into the table at a specified row index.
         Property/method value type: TR object
         JavaScript syntax: - myTABLE.insertRow(anIndex)
         Argument list: anIndex The row at which to insert a new row
         马克-to-win：note that Table has this method of "insertRow" which directly insert a row into a table without passing through tbody.
         */
        var tr = table.insertRow(i);
        //为每行循环插入3列
        for (var j = 0 ; j < 3 ; j++)
        {