原生javaScript做得动态表格(注释写的很清楚)
原生javaScript做得动态表格(注释写的很清楚)
发布时间:2016-12-30 来源:查字典编辑
摘要:最近看了3本o'reilly的书,我们一般称为禽兽书(跟我一同学的名字很像大笑),然后一直想做一个列子来练练手,因为看公司好多用动态表格的,...

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

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

复制代码 代码如下:

<span><!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" />

<input type="button" value="全部选择" />

<input type="button" value="全部取消" />

<input type="button" value="删除" id="delete"/>

<table id="tab" cellpadding="5px" cellspacing="0px">

<tr><td></td><td>序号</td><td>题目一</td><td>题目二</td><td>题目三</td></tr>

</table>

</body>

</html></span>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类