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

浏览数：31 / 时间：2015年06月09日

<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="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';

document.all.yltable.focus();

}


</script> 
</HEAD> 
<BODY> 
<form name="ylform" id="ylform"> 
<center> 
<input name="button" type="button" onClick="inserttable()" value="增加表格"> 
<input name="button2" type="button" onClick="insertrow1()" value="增加一行1"> 

<input name="button22" type="button" onClick="insertrow2()" value="增加一行2"> 
</center>


<div style="overflow-y:auto; overflow-x:visible;width:85%;height:150px">
<table border="1" align="center" width="50%" id="yltable"> 
<TBODY id=yl1> 
<tr> 
<td width="30%" height="22"><div align="center">1</div>
<td width="40%"> 
<div align="center"> 
<input name="textfield" type="text" value="yl"> 
</div></td> 
<td width="30%"><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
<TBODY id=yl2> 
<tr> 
<td><div align="center">2</div></td> 
<td><div align="center"> 
<input name="textfield2" type="text" value="yanleigis"> 
</div></td> 
<td><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
<TBODY id=yl3> 
<tr> 
<td ><div align="center">3</div></td> 
<td ><div align="center"> 
<input name="textfield22" type="text" value=""> 
</div></td> 
<td ><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
</table> 
</div>


<center> 
</center> 
</form> 
</BODY> 
</HTML>

运行截图：

上面这个只是个简单的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="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';
		newcell.innerHTML=json.paramvalue;
		
		newcell=newRow.insertCell() ; 
		//newRow.bgColor='#FFFFFF';
		newcell.className="cell";
		newcell.align='center';
		//newcell.innerHTML='<shiro:hasPermission name="dojob:delete"><a class="delete" target="ajaxTodo" href="/workbench/sdsc/job/jobparamdelete/'+json.id+'" title="确认要删除该参数?"><span>删除</span></a></shiro:hasPermission>';
		newcell.innerHTML='<a title="确认要删除该参数?" onClick="submit('+json.id+')"><span>删除</span></a>';
		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) 功能是添加一天信息动态显示到上面的表格，点删除先删除数据库信息，在让表格的这一行消失。

界面：