原生javaScript做得动态表格

最新推荐文章于 2023-04-25 21:27:03 发布

沿途看风景

最新推荐文章于 2023-04-25 21:27:03 发布

阅读量725

点赞数

分类专栏： javascript 动态表格文章标签： javascript html 源码

本文链接：https://blog.csdn.net/u011193139/article/details/17606605

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

动态表格

1 篇文章 0 订阅

订阅专栏

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

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

<!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" οnclick="addRow()" />
    <input type="button" value="全部选择" οnclick="allSelect()" />
    <input type="button" value="全部取消" οnclick="cancelSelect()" />
    <input type="button" value="删除" id="delete" οnclick="deleteRow()"/>
    <table id="tab" cellpadding="5px" cellspacing="0px">
    	<tr><td></td><td>序号</td><td>题目一</td><td>题目二</td><td>题目三</td></tr>
    </table>
</body>
</html>

沿途看风景

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
原生javaScript做得动态表格

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

扫一扫