js动态创建、删除表格示例代码

生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号

方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。
方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。
方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串
方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。

运行时间比较:
方法运行时间（ms）
方法一 93037
方法二 3341
方法三 2795
方法四 500

具体的程序如下：
复制代码代码如下:
<html>
<head>
<title>test page</title>
<script type="text/javascript">
<！--
function createTable（） {
var t = document.createElement（"table"）;
for （var i = 0; i < 2000; i++） {
var r = t.insertRow（）;
for （var j = 0; j < 5; j++） {
var c = r.insertCell（）;
c.innerHTML = i + "," + j;
}
}
document.getElementById（"table1"）.appendChild（t）;
t.setAttribute（"border", "1"）;
}
function createTable2（） {
var t = document.createElement（"table"）;
var b = document.createElement（"tbody"）;
for （var i = 0; i < 2000; i++） {
var r = document.createElement（"tr"）;
for （var j = 0; j < 5; j++） {
var c = document.createElement（"td"）;
var m = document.createTextNode（i + "," + j）;
c.appendChild（m）;
r.appendChild（c）;
}
b.appendChild（r）;
}
t.appendChild（b）;
document.getElementById（"table1"）.appendChild（t）;
t.setAttribute（"border", "1"）;
}
function createTable3（） {
var data = "";
data += "<table border=1><tbody>";
for （var i = 0; i < 2000; i++） {
data += "<tr>";
for （var j = 0; j < 5; j++） {
data += "<td>" + i + "," + j + "</td>";
}
data += "</tr>";
}
data += "</tbody><table>";
document.getElementById（"table1"）.innerHTML = data;
}
function createTable4（） {
var data = new Array（）;
data.push（"<table border=1><tbody>"）;
for （var i = 0; i < 2000; i++） {
data.push（"<tr>"）;
for （var j = 0; j < 5; j++） {
data.push（"<td>" + i + "," + j + "</td>"）;
}
data.push（"</tr>"）;
}
data.push（"</tbody><table>"）;
document.getElementById（"table1"）.innerHTML = data.join（""）;
}
function showFunctionRunTime（f） {
var t1 = new Date（）;
f（）;
var t2 = new Date（）;
alert（t2 - t1）;
}
//-->
</script>
</head>
<body>
<div id="table1" style="border: 1px solid black">
</div>
<script>
showFunctionRunTime（createTable）;
showFunctionRunTime（createTable2）;
showFunctionRunTime（createTable3）;
showFunctionRunTime（createTable4）;
</script>
</body>
</html>

1、inserRow（）和insertCell（）函数
insertRow（）函数可以带参数，形式如下：
insertRow（index）
这个函数将新行添加到index的那一行前，比如insertRow（0）,是将新行添加到第一行之前。默认的insertRow（）函数相当于insertRow（-1）,将新行添加到表的最后。
insertCell（）和insertRow的用法相同。
2、动态设置属性和事件
上面的innerHTML和innerText都是列的属性。
innerText是添加到<tb></tb>之间的文本，innerHTML是添加到<tb></tb>之间的HTML代码
设置其他属性也是用同样的方式，比如，设置行背景色
tr.bgColor = "red";
设置colspan属性
td.colSpan = 3;

设置事件也一样，需要简单说明一点。
比如，我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick函数如下：
function newClick（）{
alert（"这是新添加的行"）;
｝
对onclick事件设置这个函数的代码如下：
tr.onclick = newClick;
这里需要主义的是，＝后面的部分必须是函数名,而且不能带引号，
newTr.onclick = newClick（）;
newTr.onclick = "newClick";
newTr.onclick = "newClick";
上面的写法都是错误的。
下面的写法，也是正确的
newTr.onclick = function newClick（）{
alert（"这是新添加的行"）;
}
动态删除表格
方法1：
复制代码代码如下:
<table id=mxh border=1>
<tr>
<td>第1行</td><td onclick="deleteRow（"mxh",this.parentElement.rowIndex）">删除本行</td>
</tr>
<tr>
<td>第2行</td><td onclick="deleteRow（"mxh",this.parentElement.rowIndex）">删除本行</td>
</tr>
</table>
<script>
function deleteRow （tableID, rowIndex） {
var table =document.all[tableID]
table.deleteRow（rowIndex）;
}
function getRowNum（tableID）{
var tab = document.all[tableID]
//表格行数
var rows = tab.rows.length ;
//表格列数
var cells = tab.rows.item（0）.cells.length ;
}
</script>

方法2：
复制代码代码如下:
<table id=mxh border=1>
<tr>
<td>第1行</td><td onclick="deleteRow（this.parentElement）">删除本行</td>
</tr>
<tr>
<td>第2行</td><td onclick="deleteRow（this.parentElement）">删除本行</td>
</tr>
</table>
<script>
function deleteRow （obj） {
obj.parentElement.removeChild（obj）;
}
</script>