JavaScript动态创建与删除表格的四种方法及性能对比

动态表格创建与性能测试

构建一个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>

DOM方法与属性事件设置

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>