首页 > 编程 > JavaScript > 正文

javascript 动态创建表格

2019-11-20 13:28:09
字体:
来源:转载
供稿:网友

复制代码 代码如下:

<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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表