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

前端技术 2023/09/03 JavaScript

第一种方法：

复制代码 代码如下:

<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种方法小伙伴们是否都了解了呢，如有更好的方法，也请大家留言说明下，大家共同进步。

本文地址：https://www.stayed.cn/item/6465

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案