<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) 功能是添加一天信息动态显示到上面的表格 ，点删除先删除数据库信息，在让表格的这一行消失。
界面：
这里面主要的难点是删除，要找到这一行。 我直接把后台传来的id当成这个按钮的id，找到按钮的父节点 ，删其子节点：
document.getElementById(a).parentNode.removeChild(document.getElementById(a));
这里费半天劲儿才能弄好，贴出来希望给大家帮助。
html表格动态添加删除行(有后台操作）
时间： 2024-10-20 14:55:16