3个回答
展开全部
js动态增加删除行代码，很实用。
所做过的多个项目中均用到js动态添加删除行的应用，在写过多种方案后，最终整理出这个最为方便应用的方案，以备日后拿来便用：以下是DEMO全部代码：
<html>
<head>
<title>Ace Test</title>
<script language="JavaScript">
var cGetRow=-99999;
function insertrow(){
var newrow = document.all.ACE_HIDDEN_TABLE.rows[0].cloneNode(true); //克隆一行
document.all("newTB").appendChild(newrow); //添加刚才克隆的一行
}
function GetRow(){
//获得行索引
//两个parentElement分别是TD和TR，rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
DelRow(cGetRow);//点击checkbox时，直接删除行。
}
function DelRow(iIndex){
//删除一行
if(iIndex==-99999){
alert("系统提示：没有选中行号!");
}else{
newTB.deleteRow(iIndex);
iIndex==-99999;//将rowIndex恢复默认值。
}
}
</script>
</head> <body class="dialog_body">
<form method="POST" onSubmit="return doSubmit(this)">
<table border="1" width="900" cellpadding="0" cellspacing="0" class="table">
<!-- 隐藏table,用于克隆的行 begin -->
<tbody id="ACE_HIDDEN_TABLE" style="display:none">
<tr>
<td><input type="checkbox" onclick="GetRow()"/></td>
<td width="16%">
<select id="pid" name="project"">
<option value=""></option>
<option value="0">
人员编号
</option>
<option value="1">
姓名
</option>
</select>
</td>
<td width="16%">
<input id="result" type="text" value="" readonly="true">
</td>
</tr>
</tbody>
</table>
<!-- 隐藏table,用于克隆的行 end -->
<table border="1" width="900" cellpadding="0" cellspacing="0" class="table">
<!-- 插入新行的区域 begin -->
<tbody id="newTB">
</tbody>
<!-- 插入新行的区域 end -->
</table> <div align="right" style="margin:10px;">
<input type="button" onClick="insertrow();" value="增加一行">
<input type="button" onClick="DelRow(cGetRow);" value="删除一行">
</div>
</form>
</body>
</html>
使用方法很简单，只要懂代码的都能看懂，我在这里就不啰嗦了
所做过的多个项目中均用到js动态添加删除行的应用，在写过多种方案后，最终整理出这个最为方便应用的方案，以备日后拿来便用：以下是DEMO全部代码：
<html>
<head>
<title>Ace Test</title>
<script language="JavaScript">
var cGetRow=-99999;
function insertrow(){
var newrow = document.all.ACE_HIDDEN_TABLE.rows[0].cloneNode(true); //克隆一行
document.all("newTB").appendChild(newrow); //添加刚才克隆的一行
}
function GetRow(){
//获得行索引
//两个parentElement分别是TD和TR，rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
DelRow(cGetRow);//点击checkbox时，直接删除行。
}
function DelRow(iIndex){
//删除一行
if(iIndex==-99999){
alert("系统提示：没有选中行号!");
}else{
newTB.deleteRow(iIndex);
iIndex==-99999;//将rowIndex恢复默认值。
}
}
</script>
</head> <body class="dialog_body">
<form method="POST" onSubmit="return doSubmit(this)">
<table border="1" width="900" cellpadding="0" cellspacing="0" class="table">
<!-- 隐藏table,用于克隆的行 begin -->
<tbody id="ACE_HIDDEN_TABLE" style="display:none">
<tr>
<td><input type="checkbox" onclick="GetRow()"/></td>
<td width="16%">
<select id="pid" name="project"">
<option value=""></option>
<option value="0">
人员编号
</option>
<option value="1">
姓名
</option>
</select>
</td>
<td width="16%">
<input id="result" type="text" value="" readonly="true">
</td>
</tr>
</tbody>
</table>
<!-- 隐藏table,用于克隆的行 end -->
<table border="1" width="900" cellpadding="0" cellspacing="0" class="table">
<!-- 插入新行的区域 begin -->
<tbody id="newTB">
</tbody>
<!-- 插入新行的区域 end -->
</table> <div align="right" style="margin:10px;">
<input type="button" onClick="insertrow();" value="增加一行">
<input type="button" onClick="DelRow(cGetRow);" value="删除一行">
</div>
</form>
</body>
</html>
使用方法很简单，只要懂代码的都能看懂，我在这里就不啰嗦了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<table id=test>
<tr><td>asdsadfsfdsfsdfsddsa</td><td><input value="删除" type=button onclick=del(this)></td></tr>
<tr><td>sdfsdfsdgfdgfdgdf</td><td><input value="删除" type=button onclick=del(this)></td></tr>
</table>
<input value="添加" type=button onclick=add('test','我就是添加的')>
<script>
var i = 1;
function del(obj){
var tobj=obj.parentElement.parentElement.parentElement.parentElement;
tobj.deleteRow(obj.parentElement.parentElement.rowIndex);
}
function add(id,text){
var obj=document.getElementById(id);
var rowObj = obj.rows[0].cloneNode(true);
rowObj.firstChild.innerHTML = text + i;
obj.firstChild.appendChild(rowObj);
i++;
}
</script>
<tr><td>asdsadfsfdsfsdfsddsa</td><td><input value="删除" type=button onclick=del(this)></td></tr>
<tr><td>sdfsdfsdgfdgfdgdf</td><td><input value="删除" type=button onclick=del(this)></td></tr>
</table>
<input value="添加" type=button onclick=add('test','我就是添加的')>
<script>
var i = 1;
function del(obj){
var tobj=obj.parentElement.parentElement.parentElement.parentElement;
tobj.deleteRow(obj.parentElement.parentElement.rowIndex);
}
function add(id,text){
var obj=document.getElementById(id);
var rowObj = obj.rows[0].cloneNode(true);
rowObj.firstChild.innerHTML = text + i;
obj.firstChild.appendChild(rowObj);
i++;
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//添加行
function addRow(tbl)
{
var a = tbl.insertRow();
a.id = "a" + tbl.rows.length;
for(var i=0; i<tbl.rows[0].cells.length; i++)
{
var tc = a.insertCell();
tc.innerText = " ";
tc.onfocus = function()
{
this.parentElement.parentElement.parentElement.ct = this.parentElement;
this.innerHTML = "<input type=\"text\" value=\"" + (this.innerText==" "?"":this.innerText) + "\" style=\"width:100%;height:100%;border:0;\" onblur=\"this.parentElement.innerText=(this.value==''?' ':this.value);\">";
this.children[0].focus();
};
}
}
//删除行
function delRow(tbl)
{
if(!tbl.ct) return;
tbl.deleteRow(tbl.ct.rowIndex);
tbl.ct = null;
}
</SCRIPT>
<table border=1 id="tbl">
<tr id=a1>
<td>1</td>
<td>2</td>
</tr>
</table>
<input type="button" value="添加" onclick="addRow(document.all.tbl);">
<input type="button" value="删除" onclick="delRow(document.all.tbl);">
</BODY>
<SCRIPT LANGUAGE="JavaScript">
//添加行
function addRow(tbl)
{
var a = tbl.insertRow();
a.id = "a" + tbl.rows.length;
for(var i=0; i<tbl.rows[0].cells.length; i++)
{
var tc = a.insertCell();
tc.innerText = " ";
tc.onfocus = function()
{
this.parentElement.parentElement.parentElement.ct = this.parentElement;
this.innerHTML = "<input type=\"text\" value=\"" + (this.innerText==" "?"":this.innerText) + "\" style=\"width:100%;height:100%;border:0;\" onblur=\"this.parentElement.innerText=(this.value==''?' ':this.value);\">";
this.children[0].focus();
};
}
}
//删除行
function delRow(tbl)
{
if(!tbl.ct) return;
tbl.deleteRow(tbl.ct.rowIndex);
tbl.ct = null;
}
</SCRIPT>
<table border=1 id="tbl">
<tr id=a1>
<td>1</td>
<td>2</td>
</tr>
</table>
<input type="button" value="添加" onclick="addRow(document.all.tbl);">
<input type="button" value="删除" onclick="delRow(document.all.tbl);">
</BODY>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
