求动态添加删除表格行JS(必须→兼容火狐和IE)
点击按钮“添加截图”，就会添加一行(相当于插入一行TR以及TD)，然后点击“删除行”，就会删除当前这一行，如图所示：...
点击按钮“添加截图”，就会添加一行(相当于插入一行 TR 以及 TD )，然后点击“删除行”， 就会删除当前这一行，如图所示：
展开
2个回答
展开全部
您好！很高兴为您答疑。
这个功能可以用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();
}
如果对我们的回答存在任何疑问，欢迎继续问询。
这个功能可以用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();
}
如果对我们的回答存在任何疑问，欢迎继续问询。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
