求动态添加删除表格行JS(必须→兼容火狐和IE)

发布网友发布时间：2022-05-05 03:28

共2个回答

热心网友时间：2022-05-15 14:17

　　您好！很高兴为您答疑。
　　这个功能可以用jquery简单实现，其实表格就是一旦格式化的html代码。
　　//添加行
　　function appendRow(){
　　var tr = $("#jmcyxm1").clone(true);//克隆一行
　　tr.find("td:last").html("<img src='你的gif图片' onclick='delRow(this);'title='删除'>");
　　tr.insertBefore("#table2 tr:last");//把这行加到表格的倒数第二行，表格添加完毕
　　}
　　//删除相对应的行
　　function delRow(rows)
　　{
　　$(rows).parent("td").parent("tr").remove();
　　}
　　如果对我们的回答存在任何疑问，欢迎继续问询。

热心网友时间：2022-05-15 15:35

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<script language="JavaScript">
//var intRowIndex = -1;
var tbIndex = 0;
function insertRow(tbIndex)
{
var T1="<input type=text name=kid"+tbIndex+" title=kid"+tbIndex+" value=''>" ;
var T2="第"+(tbIndex+1)+"行";
var objRow = document.getElementById("myTable").insertRow(tbIndex);
var objCel = objRow.insertCell(0);
objCel.innerHTML =T2;
var objCel = objRow.insertCell(1);
objCel.innerHTML = T1;
objRow.style.background = "#ccc";
}
function deleteRow()
{
U= document.getElementById("myTable").rows.length-1;
if(U>0){
document.getElementById("myTable").deleteRow(U);
}
else{
alert("至少保留一行") ;
}
}
</script>

<form name="myForm">
<table id="myTable" border=1>
<tr onclick="getIndex()">
<td>第1行</td>
<td><input type=text name=kid0></td>
</tr>
</table>
<input type="button" onclick="deleteRow()" value="减少一行">
<input type="button" onclick="insertRow(document.getElementById('myTable').rows.length)" value="增加一行" >
</form>