您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
原生javaScript做得动态表格
作者：佚名 责任编辑：admin 更新时间：2022-06-22
因为看公司好多用动态表格的，所以，我就试着用js做了动态表格，下面有个不错的示例，感兴趣的朋友可以参考下
最近看了3本o'reilly的书，我们一般称为禽兽书（跟我一同学的名字很像大笑），然后一直想做一个列子来练练手，因为看公司好多用动态表格的，所以，我就试着用js做了动态表格，用firfox浏览器来调试的，因为firbug插件用着比较好，本来就是想实现一个很小的功能，没想做那么多，就点击按钮能够增加一行就行了，后来越加越多，也越来越好看了。把源码贴出来，大家共同学习，有问题也可以指正出来，js初学者，忘大神笔下留情。 ps:不知道上面为什么不显示行号，好久没用了。 注释写的很清楚，大家共同学习。 代码如下: <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>动态表格</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"> /*在函数的外部只能声明一些变量之类的，不能用操作方法，因为没有函数去调用执行它。*/ //在载入页面的时候就在表格头放入选择框，因为是一次性的 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> <h3>动态表格</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>- 上一个程序编程： jquery改变tr背景色的代码
- 下一个程序编程： JS字符串截取函数实例
