快捷導(dǎo)航

原生javaScript做得動(dòng)態(tài)表格(注釋寫的很清楚)

更新時(shí)間：2013年12月29日 17:28:07 作者：

因?yàn)榭垂竞枚嘤脛?dòng)態(tài)表格的，所以，我就試著用js做了動(dòng)態(tài)表格，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下

最近看了3本o'reilly的書，我們一般稱為禽獸書（跟我一同學(xué)的名字很像大笑），然后一直想做一個(gè)列子來練練手，因?yàn)榭垂竞枚嘤脛?dòng)態(tài)表格的，所以，我就試著用js做了動(dòng)態(tài)表格，用firfox瀏覽器來調(diào)試的，因?yàn)閒irbug插件用著比較好，本來就是想實(shí)現(xiàn)一個(gè)很小的功能，沒想做那么多，就點(diǎn)擊按鈕能夠增加一行就行了，后來越加越多，也越來越好看了。把源碼貼出來，大家共同學(xué)習(xí)，有問題也可以指正出來，js初學(xué)者，忘大神筆下留情。

ps:不知道上面為什么不顯示行號，好久沒用了。注釋寫的很清楚，大家共同學(xué)習(xí)。

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

 
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>動(dòng)態(tài)表格</title> 
<style type="text/css"> 
body{ background-color:#9CC; text-align:center} 
table{ margin:10px auto;} 
tr th { border: 1px solid #096;} 
td{border: 1px solid #096;} 
</style> 
<script type="text/javascript"> 
/*在函數(shù)的外部只能聲明一些變量之類的，不能用操作方法，因?yàn)闆]有函數(shù)去調(diào)用執(zhí)行它。*/ 

//在載入頁面的時(shí)候就在表格頭放入選擇框，因?yàn)槭且淮涡缘?
window.onload = function(){ 
var tab = document.getElementById('tab'); 
var firsttr = document.getElementsByTagName('tr')[0]; 
var childtd = firsttr.childNodes; 
//在第一行第一列上加入選擇框 
var inp = document.createElement('input'); 
inp.type = 'checkbox'; 

//DOM Leve 2 事件注冊 
catchEvent(inp,'click',function(){ //注冊函數(shù) 不同狀態(tài)進(jìn)行判斷 
if(inp.checked ==true){ 
allSelect(); 
}else{ 
cancelSelect(); 
} 
}); 
//catchEvent(inp,'click',allSelect); 
//catchEvent(inp,'change',cancelSelect); 
childtd[0].appendChild(inp); 

} 

//增加一行 
//var count =0;//增加一列用來 計(jì)數(shù) 
function addRow(){ 
//count++; 
var tab = document.getElementById('tab'); 
var firsttr = document.getElementsByTagName('tr')[0]; 
var childtd = firsttr.childNodes; 
var tr = document.createElement('tr'); 
var arrtd = new Array(); 
var arrinp = new Array(); 
for(var i =0;i<childtd.length;i++){ 
arrtd[i] = document.createElement('td'); 
arrinp[i] = document.createElement('input'); 
if(i==0){ 
arrinp[i].type = 'checkbox'; 
arrinp[i].name = 'selectbox'; 
}else if(i==1){ 
//arrinp[i] = document.createTextNode(count); 
arrinp[i] = document.createTextNode(''); 
} 
arrtd[i].appendChild(arrinp[i]);//思考為什么 input也要加上數(shù)組。 
tr.appendChild(arrtd[i]); 
} 

tab.appendChild(tr); 
newSort(); 
} 
//刪除操作 
function deleteRow(){ 
var parentTr = new Array();//先把被選中的行放在一個(gè)數(shù)組上 
var box = document.getElementsByName('selectbox'); 
var tab = document.getElementById('tab'); 
for(var i = 0;i<box.length;i++){ 
if(box[i].checked==true){ 
var parent = box[i].parentNode; 
parentTr[i] = parent.parentNode;//如果直接這種為放在里面為什么不能完全刪除？？是因?yàn)榉磻?yīng)不夠嗎？ 
//tab.removeChild(parentTr); 
} 
} 
for(var i = 0;i<parentTr.length;i++){ //這樣做才能把選中的全部刪除 
if(parentTr[i]){ //這邊要先判斷一下是否為空值，如果不為空才去移除，否者會(huì)報(bào)錯(cuò)。 
tab.removeChild(parentTr[i]); 
} 
} 
newSort(); 
} 

//如果執(zhí)行刪除的話則，重新進(jìn)行排序 
function newSort(){ 
var text = new Array(); 
var child_td = new Array(); 
var arr_tr = document.getElementsByTagName('tr'); 
for(var i = 1;i<arr_tr.length;i++){ 
child_td[i] = arr_tr[i].childNodes[1];//獲得從第二行開始所有第二列的節(jié)點(diǎn) 
if(child_td[i].childNodes[0]){ 
child_td[i].removeChild(child_td[i].childNodes[0]); 
} 
text[i] = document.createTextNode(i); 
child_td[i].appendChild(text[i]); 

} 
} 
//全選操作 
function allSelect(){ 
var box = document.getElementsByName('selectbox'); 
for(var i= 0;i<box.length;i++){ 
box[i].checked = true; 
} 
} 

//全部取消選擇 
function cancelSelect(){ 
var box = document.getElementsByName('selectbox'); 
for(var i = 0;i<box.length;i++){ 
if(box[i].checked == true){ 
box[i].checked =false; 
} 
} 
} 
//事件注冊函數(shù) 
function catchEvent(eventobj,event,eventHandler){ 
if(eventobj.addEventListener){ 
eventobj.addEventListener(event,eventHandler,false); 
}else if(eventobj.attachEvent){ 
event = 'on'+event; 
eventobj.attachEvent(event,eventHandler); 
} 
} 

//catchEvent(add,'click',addRow); 

</script> 
</head> 

<body> 
<h3>動(dòng)態(tài)表格</h3> 
<input type="button" value="增加" id="add" onclick="addRow()" /> 
<input type="button" value="全部選擇" onclick="allSelect()" /> 
<input type="button" value="全部取消" onclick="cancelSelect()" /> 
<input type="button" value="刪除" id="delete" onclick="deleteRow()"/> 
<table id="tab" cellpadding="5px" cellspacing="0px"> 
<tr><td></td><td>序號</td><td>題目一</td><td>題目二</td><td>題目三</td></tr> 
</table> 
</body> 
</html></span> 