javascript 动态创建表格的2种方法总结
第一种方法:
<html> <head> <script> functioncreateTable(rows,lines){ this.rows=rows; this.lines=lines; varBody=document.getElementById('body'); varTable=document.createElement('table');//创建table标签元素 Table.setAttribute('border','1'); //给table标签添加其他属性 for(vari=0;i<this.rows;i++){ varlRow=document.createElement('tr'); for(varj=0;j<this.lines;j++){ vartextNode=document.createTextNode(i+','+j); varlLine=document.createElement('td'); lLine.appendChild(textNode); lRow.appendChild(lLine); } Table.appendChild(lRow); } Body.appendChild(Table); } </script> </head> <body> <divid="body"></div> </body> <scripttype="text/javascript"> createTable(10,10); </script> </html>
第二种方法:
<script> functioncreateTable(rows,lines){ this.rows=rows; this.lines=lines; varBody=document.getElementById('body'); varTable=document.createElement('table'); Table.setAttribute('border',1); for(vari=0;i<this.rows;i++){ varrow=Table.insertRow(i); for(varj=0;j<this.lines;j++){ varcells=row.insertCell(j); cells.innerHTML=i+','+j } } Body.appendChild(Table); } </script>
以上2种方法小伙伴们是否都了解了呢,如有更好的方法,也请大家留言说明下,大家共同进步。