html表格动态添加删除行(有后台操作）

 
 
 
 
 
 
 
 
 
 

 




 
 
 
1
 
 
 
 
 
  
 
 
 
 
 
2
 
 
 
 
 
  
 
 
 
 
 
3
 
 
 
 
 
  
 
 
 
 



 
 
 
 

 

运行截图：

上面这个只是个简单的demo，里面很多地方要根据实际需要改。

比如在用insertRow()添加时会先查看现有几行，然后给下一行赋id，deleteRow()是根据这个id进行删除的，所以一边添加一边删除的话会删错。

下面就看一下我在实际项目中的写法：
主要代码如下：

var j_1=0;
	function callback(json){
	//alert(json.id);
	//提交参数的回调函数
		//表格添加一行
		newRow=document.all.yltable.insertRow(-1); 
		 j_1++;
		newRow.id=json.id;
		newcell=newRow.insertCell(); 
		newcell.className="cell";
		//newRow.bgColor='#FFFFFF'; 
		newcell.align='center'; 
		//newcell.innerHTML="";
		newcell.innerHTML="第"+j_1+"行";
		
		newcell=newRow.insertCell(); 
		//newRow.bgColor='#FFFFFF';
		newcell.className="cell";
		newcell.align='center'; 
		newcell.innerHTML=json.paramname;
		
		newcell=newRow.insertCell() ; 
		//newRow.bgColor='#FFFFFF';
		newcell.className="cell";
		newcell.align='center';
		
		//alert(document.getElementById("aaaaa"))
		//newcell.innerHTML=' ';
		newcell.innerHTML=json.paramvalue;
		
		newcell=newRow.insertCell() ; 
		//newRow.bgColor='#FFFFFF';
		newcell.className="cell";
		newcell.align='center';
		//newcell.innerHTML='删除';
		newcell.innerHTML='删除';
		document.all.yltable.focus();
		
		
	}
	
	function submit(a){
	$.ajax({
				url : "/workbench/sdsc/job/jobparamdelete/"+a,
				data : {
				},
				type:"post",
				dataType : 'json',
				success : function(data) {
					var table = document.getElementById('yltable');
					document.getElementById(a).parentNode.removeChild(document.getElementById(a));
						
				},
				error : function() {
					alert("失败");
				}
		});
	}

这里是表单提交后的一个回调函数 callback(json)  功能是添加一天信息动态显示到上面的表格 ，点删除先删除数据库信息，在让表格的这一行消失。

界面：

 

这里面主要的难点是删除，要找到这一行。  我直接把后台传来的id当成这个按钮的id，找到按钮的父节点 ，删其子节点：

document.getElementById(a).parentNode.removeChild(document.getElementById(a));

 

这里费半天劲儿才能弄好，贴出来希望给大家帮助。