纯JS代码完成表格增删改查

阅读更多

【前言】

      最近教学生用JS手写一个表格的增删改查，发现一些学生共性问题，这里简单总结下，希望有所帮助。

 

【主体】

      问题比较多，这里大概列举几个常见的

 

（1）获取表单值写到了点击事件外部，导致点击按钮时获取不到表单输入值

         解析：如果写到了外部，name获取到的会是初始化页面时的表单值--→即空。所以必须写到点击事件内部才能获取点击时的当前表单值。

 

（2）实现全选全不选

var checkBoxs = document.getElementsByName("del");
var status = me.checked;
for (var i = 0; i < checkBoxs.length; i++) {
	checkBoxs[i].checked = status;
}

 

（3）添加元素节点appendChild()

 

（4）删除节点removeChild()

 

（5）创建元素节点creatElement

 

（6）创建文本节点createTextNode

 

（7）同时删除多个时，普通的遍历方式删除表格会导致全选后删除失败，遗漏多行删除不了（因为每删除一个会导致表格行数改变）

    1、错误方法：

 

var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = 0; i < delAll.length; i++) {
	if(delAll[i].checked == true){
		delTr = delAll[i].parentNode.parentNode;
		delTb = delTr.parentNode;
		delTb.removeChild(delTr);
	}	
}

    原因分析：这样写存在一个问题，当第一行被删除时，表格的结构发生了变化，以前的第i+1行变成了现在的第i行，所以按照这种写法无法遍历删除所以选中的行。 正确的写法应该从最大的行号开始删除，这样第i+1行被删除后不会影响第i行在表格中的行号。   

    2、修改后的方法

var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = delAll.length-1; i >= 0 ; i--) {
	if(delAll[i].checked == true){
		delTr = delAll[i].parentNode.parentNode;
		delTb = delTr.parentNode;
		delTb.removeChild(delTr);
	}	
}

   3、修改优化后的方法

         除了上面的方法，还有另一种就是在每次循环完毕后，执行一次 i--

var delAll = document.getElementsByName("del");
var delTr,delTb;
for (var i = 0; i < delAll.length ; i++) {
	if(delAll[i].checked == true){
		delTr = delAll[i].parentNode.parentNode;
		delTb = delTr.parentNode;
		delTb.removeChild(delTr);
	         i--;
	}	
}

 

（8）获取子节点

         有多种方法获取，例如children()和childNodes

         注意：使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。为了不显示不必须的换行的空格，我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤

//去掉换行的空格
for(var i=0; i 
  
         推荐：通过children来获取子节点。利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。
 
  
var getFirstChild = document.getElementById("test").children[0]; 
 
  
 
 
  
（9）rowIndex 属性返回某一行在表格的行集合中的位置，返回在表格中的位置
 
  
 
 
  
 
 
  
最后直接上代码，直接复制粘贴即可查看效果
 
  



	
	
	



	全部删除


	

		

		
班级
		
姓名
		
分数
		
生日
		
操作
	
	

		

		
1班
		
路飞
		
100
		
2018-09-10
		

			删除修改
		
	
	

		

		
2班
		
索隆
		
90
		
2017-01-18
		

			删除修改
		
	
	

		

		
3班
		
娜美
		
98
		
2016-07-01
		

			删除修改
		
	


	班级：

	姓名：

	分数：

	生日：

	提交


	

		x	
		班级：

		姓名：

		分数：

		生日：

		更新	
	



   
  
先总结到这里，如有误解敬请指正。
 
  
.