JavaScript 动态创建table表格
JavaScript 动态创建table表格属于前端实例代码，有关更多实例代码大家可以查看。
在实际应用中，可能需要动态创建一个table表格以便应用。
下面就是一段能够实现此功能的代码实例，下面就分享一下此代码，并给出详细的注释。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<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 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);
}
window.onload=function(){
createTable(10,10);
}
</script>
</head>
<body >
<div id="body"></div>
</body>
</html>
上面的代码实现了动态创建效果，下面介绍一下它的实现过程。
一.代码注释:
（1）.function createTable(rows,lines){}，此函数实现了创建功能，函数的参数表示创建表格的行数和列数。
（2）.this.rows=rows，将行数赋值给this.rows，this的指向根据不同的使用会有所不同，具体可以参阅相关阅读。
（3）.this.lines=lines，将列数赋值给this.lines。
（4）.var Body=document.getElementById('body')，获取id属性值为body的元素对象。
（5）.var Table=document.createElement('table')，创建一个table对象。
（6）.Table.setAttribute('border','1')，设置table的border属性值。
（7）.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);
}，通过for循环的方式创建tr元素和td元素，然后对td元素进行赋值操作。
（8）.Body.appendChild(Table)，追加创建的表格对象。
（9）.window.onload=function(){
createTable(10,10);
}，创建一个10行10列的表格。
二.相关阅读:
（1）.document.createElement()参阅js createElement()一章节。
（2）.setAttribute()参阅javascript setAttribute()一章节。
（3）.rows属性参阅JavaScript rows一章节。
（4）.document.createTextNode()参阅document.createTextNode()一章节。
（5）.this的用法参阅JavaScript this一章节。
JavaScript 动态创建table表格，这样的场景在实际项目中还是用的比较多的，关于JavaScript 动态创建table表格就介绍到这了。