首页 > 代码库 > html表格动态添加删除行(有后台操作)

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

<HTML> <TITLE>Form Object example</TITLE> <HEAD> <script language="javascript"> function delrow1() { var oElement=event.srcElement; while(oElement.tagName!="TR") { oElement=oElement.parentElement; } var oTBody=oElement.parentElement; oTBody.removeChild(oElement) }function delrow2()//刪除当前行 { var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex; document.all.yltable.deleteRow(currRowIndex);//table10--表格id } function insertrow2() //增加的一行方法2 { newRow=document.all.yltable.insertRow(-1); var j_1 = document.all.yltable.rows.length; newcell=newRow.insertCell(); newRow.bgColor='#FFFFFF'; newcell.align='center'; newcell.innerHTML=""+j_1+"";newcell=newRow.insertCell() ; newRow.bgColor='#FFFFFF';newcell.align='center'; newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";newcell=newRow.insertCell() ; newRow.bgColor='#FFFFFF';newcell.align='center';newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value=http://www.mamicode.com/"删除1"> ';>

 

运行截图:

上面这个只是个简单的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='<input name="button3" type="button" onClick="delrow1()" value=http://www.mamicode.com/"删除1"> ';>


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

界面:

 

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

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

 

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