本文总结JavaScript动态创建表格的两种常用方法。第一种通过createElement手动构建table、tr、td节点并追加文本；第二种利用insertRow和insertCell API简化行列插入。文章提供完整代码示例，对比两种实现逻辑，帮助开发者根据需求选择合适方案。
基于DOM节点创建的表格实现
实现动态表格生成的第一种方案如下：
具体代码实现如下：
<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>基于insertRow与insertCell的表格实现
第二种实现方案如下：
具体代码实现如下：
<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>以上介绍了两种动态生成表格的方法，读者可根据实际场景选择。如有更优方案，欢迎留言交流，共同提升技术能力。