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

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

2024-07-17 12:42:06   227人阅读

<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));
 
这里费半天劲儿才能弄好，贴出来希望给大家帮助。


联系
我们