原生javaScript做得动态表格(注释写的很清楚)_javascript技巧-js教程-PHP中文网

最近看了3本o'reilly的书，我们一般称为禽兽书（跟我一同学的名字很像大笑），然后一直想做一个列子来练练手，因为看公司好多用动态表格的，所以，我就试着用js做了动态表格，用firfox浏览器来调试的，因为firbug插件用着比较好，本来就是想实现一个很小的功能，没想做那么多，就点击按钮能够增加一行就行了，后来越加越多，也越来越好看了。把源码贴出来，大家共同学习，有问题也可以指正出来，js初学者，忘大神笔下留情。

ps:不知道上面为什么不显示行号，好久没用了。 注释写的很清楚，大家共同学习。

复制代码 代码如下:

动态表格 body{ background-color:#9CC; text-align:center} table{ margin:10px auto;} tr th { border: 1px solid #096;} td{border: 1px solid #096;} /*在函数的外部只能声明一些变量之类的，不能用操作方法，因为没有函数去调用执行它。*/

//在载入页面的时候就在表格头放入选择框，因为是一次性的 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 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 if(box[i].checked==true){ var parent = box[i].parentNode; parentTr[i] = parent.parentNode;//如果直接这种为放在里面为什么不能完全删除？？是因为反应不够吗？ //tab.removeChild(parentTr); } } for(var i = 0;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 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[i].checked = true; } }

//全部取消选择 function cancelSelect(){ var box = document.getElementsByName('selectbox'); for(var i = 0;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);

动态表格 序号 题目一 题目二 题目三