原生javaScript做得动态表格(注释写的很清楚)

　　最近看了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>

教程首页更多教程