zoukankan      html  css  js  c++  java
  • 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>
    View Code

    第二种方法:

                <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>
  • 相关阅读:
    4.9新随笔
    4.2上机作业
    3.30作业
    3.26上机练习
    作业十
    作业九
    作业八
    作业六
    作业五
    作业三
  • 原文地址:https://www.cnblogs.com/ikasa007/p/3487209.html
Copyright © 2011-2022 走看看