Posted in Javascript onMarch 04, 2015
第一种方法：
<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 动态创建表格的2种方法总结
- Author -
hebedich声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@