javascript 动态创建表格的2种方法总结

(编辑：jimmy 日期: 2026/3/5 浏览：3 次 )

第一种方法：

复制代码代码如下:
<html>
        <head>
            <script>
                function createTable(rows,lines){
                    this.rows=rows;
                    this.lines=lines;
                    var Body=document.getElementById('body');
                    var Table=document.createElement('table');//创建table标签元素
                    Table.setAttribute('border','1');
                    //给table标签添加其他属性
                    for(var i=0;i<this.rows;i++){
                        var lRow=document.createElement('tr');
                        for(var j=0;j<this.lines;j++){
                            var textNode=document.createTextNode(i+','+j);
                            var lLine=document.createElement('td');
                                lLine.appendChild(textNode);
                            lRow.appendChild(lLine);
                        }
                        Table.appendChild(lRow);
                    }
                    Body.appendChild(Table);
                }
            </script>
        </head>
        <body >
            <div id="body"></div>
        </body>
        <script type="text/javascript">
            createTable(10,10);
        </script>
</html>

第二种方法：

复制代码代码如下:
            <script>
                function createTable(rows,lines){
                    this.rows=rows;
                    this.lines=lines;
                    var Body=document.getElementById('body');
                    var Table=document.createElement('table');
                    Table.setAttribute('border',1);
                    for(var i=0;i<this.rows;i++){
                        var row=Table.insertRow(i);
                        for(var j=0;j<this.lines;j++){
                            var cells=row.insertCell(j);
                            cells.innerHTML=i+','+j
                        }
                    }
                    Body.appendChild(Table);

                }
            </script>

以上2种方法小伙伴们是否都了解了呢，如有更好的方法，也请大家留言说明下，大家共同进步。

上一篇：深入理解JavaScript系列（42）：设计模式之原型模式详解
下一篇：深入理解JavaScript系列（41）：设计模式之模板方法详解