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

最新推荐文章于 2025-08-12 14:37:12 发布

转载最新推荐文章于 2025-08-12 14:37:12 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/mark_to_win/article/details/88681075

文章标签：

#javascript #insertRow

javascript 专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript的Document.createElement()方法创建HTML表格元素，并通过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
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++)
        {
            /*TR.insertCell() (Method)
             You can insert an additional cell into the row within a table with this method.
             returned Property/method value type: TD object