相思资源网 Design By www.200059.com

第一种方法:

复制代码 代码如下:
<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,创建表格

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“javascript 动态创建表格的2种方法总结”

暂无javascript 动态创建表格的2种方法总结的评论...