快捷導(dǎo)航

js動(dòng)態(tài)創(chuàng)建、刪除表格示例代碼

更新時(shí)間：2013年08月07日 16:49:50 作者：

生成一個(gè)2000*5的表格，每個(gè)單元格的內(nèi)容是行號(hào)+逗號(hào)+列號(hào)，具體的實(shí)現(xiàn)過程如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助

生成一個(gè)2000*5的表格，每個(gè)單元格的內(nèi)容是行號(hào)+逗號(hào)+列號(hào)

方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，單元格的內(nèi)容使用innerHTML屬性進(jìn)行填充。
方法二：使用createElement生成表格，使用CreateElement方法生成行列，單元格的內(nèi)容使用了createTextNode方法填充。
方法三：拼接表格innerHTML屬性的字符串，使用字符串 += 操作符鏈接字符串
方法四：拼接表格innerHTML屬性的字符串，各個(gè)字符串追加數(shù)組里面，最后調(diào)用數(shù)組的join方法生成目標(biāo)字符串。

運(yùn)行時(shí)間比較:
方法運(yùn)行時(shí)間(ms)
方法一 93037
方法二 3341
方法三 2795
方法四 500

具體的程序如下：

復(fù)制代碼代碼如下:

 
<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()函數(shù)
　　insertRow()函數(shù)可以帶參數(shù)，形式如下：
　　insertRow(index)
　　這個(gè)函數(shù)將新行添加到index的那一行前，比如insertRow(0),是將新行添加到第一行之前。默認(rèn)的insertRow()函數(shù)相當(dāng)于insertRow(-1),將新行添加到表的最后。
　　insertCell()和insertRow的用法相同。
　　2、動(dòng)態(tài)設(shè)置屬性和事件
　　上面的innerHTML和innerText都是列的屬性。
　　innerText是添加到<tb></tb>之間的文本，innerHTML是添加到<tb></tb>之間的HTML代碼
　　設(shè)置其他屬性也是用同樣的方式，比如，設(shè)置行背景色
　　tr.bgColor = 'red';
設(shè)置colspan屬性
td.colSpan = 3;
　　
　　設(shè)置事件也一樣，需要簡(jiǎn)單說明一點(diǎn)。
　　比如，我要讓點(diǎn)擊新加行的時(shí)候執(zhí)行一個(gè)自己定義的函數(shù) newClick,newClick函數(shù)如下：
　　function newClick(){
　　 alert("這是新添加的行");
　?。?
　　對(duì)onclick事件設(shè)置這個(gè)函數(shù)的代碼如下：
　　tr.onclick = newClick;
　　這里需要主義的是，＝后面的部分必須是函數(shù)名,而且不能帶引號(hào)，
　　newTr.onclick = newClick();
　　newTr.onclick = 'newClick';
　　newTr.onclick = "newClick";
　　上面的寫法都是錯(cuò)誤的。
　　下面的寫法，也是正確的
　　newTr.onclick = function newClick(){
　　 alert("這是新添加的行");
　　}
動(dòng)態(tài)刪除表格
方法1：

復(fù)制代碼代碼如下:

 
<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] 
//表格行數(shù) 
var rows = tab.rows.length ; 
//表格列數(shù) 
var cells = tab.rows.item(0).cells.length ; 
} 
</script> 

方法2：

復(fù)制代碼代碼如下:

 
<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> 

您可能感興趣的文章: