原生javaScript做得動態表格(註解寫的很清楚)

作者：Eve Cole 更新時間：2025-02-07 16:24:02

最近看了3本o'reilly的書，我們一般稱為禽獸書（跟我一同學的名字很像大笑），然後一直想做一個列子來練練手，因為看公司好多用動態表格的，所以，我就試著用js做了動態表格，用firfox瀏覽器來調試的，因為firbug插件用比較好，本來就是想實現一個很小的功能，沒想做那麼多，就點擊按鈕能夠增加一行就行了，後來越加越多，也越來越好看了。把原始碼貼出來，大家共同學習，有問題也可以指正出來，js初學者，忘大神筆下留情。

ps:不知道上面為什麼不顯示行號，好久沒用了。註釋寫的很清楚，大家共同學習。

複製代碼代碼如下:

<head>

body{ background-color:#9CC; text-align:center}

table{ margin:10px auto;}

tr th { border: 1px solid #096;}

td{border: 1px solid #096;}

</style>

/*在函數的外部只能宣告一些變數之類的，不能用操作方法，因為沒有函數去呼叫執行它。 */

//在載入頁面的時候就在表格頭放入選擇框，因為是一次性的

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(){ //註冊函數不同狀態進行判斷

if(inp.checked ==true){

allSelect();

}else{

cancelSelect();

}

});

//catchEvent(inp,'click',allSelect);

//catchEvent(inp,'change',cancelSelect);

childtd[0].appendChild(inp);

}

//增加一行

//var count =0;//增加一列用來計數

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也要加上陣列。

tr.appendChild(arrtd[i]);

}

tab.appendChild(tr);

newSort();

}

//刪除操作

function deleteRow(){

var parentTr = new Array();//先把被選中的行放在一個陣列上

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;//如果直接這種為放在裡面為什麼不能完全刪除？？是因為反應不夠嗎？

//tab.removeChild(parentTr);

}

for(var i = 0;i<parentTr.length;i++){ //這樣做才能把選取的全部刪除

if(parentTr[i]){ //這邊要先判斷是否為空值，如果不為空才去移除，否者會報錯。

tab.removeChild(parentTr[i]);

}

newSort();

}

//如果執行刪除的話則，重新進行排序

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];//取得從第二行開始所有第二列的節點

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;

}

//事件註冊函數

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>

</table>

</body>

</html></span>