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

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

　　方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。

　　方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。

　　方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串

　　方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。

　　运行时间比较:

　　方法运行时间(ms)

　　方法一 93037

　　方法二 3341

　　方法三 2795

　　方法四 500

　　具体的程序如下：

复制代码代码如下:

　　<html>

　　<head>

<!--

　　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>

　　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：

复制代码代码如下:

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　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：

复制代码代码如下:

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　function deleteRow (obj) {

　　obj.parentElement.removeChild(obj);

　　}

　　</script>

教程首页更多教程