源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-02-04 15:36 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript 动态创建表格的2种方法总结
第一种方法:
[u]复制代码[/u] 代码如下:
<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>
第二种方法:
[u]复制代码[/u] 代码如下:
            <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种方法小伙伴们是否都了解了呢,如有更好的方法,也请大家留言说明下,大家共同进步。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部