js 动态平添 并删除 tr
日期：2014-05-17 浏览次数：20781 次
js 动态添加 并删除 tr
自己写的 但是 功能 不是我要的 希望能理解 删除的时候怎么得到该文本框的id
<table id="tab">
<tr><td> <input type="button" value="点击添加" id="addnr" onClick="addnr()"></td></tr>
</table>
$(function(){
var i=1;
$("#addnr").click(function(){
var tr='<tr id="nr'+i+'"><td><input type="text" name="nr'+i+'" id="nr"+i+"" class="input4" style="width:300px;border-style: solid; border-width: 1px"/><input type="button" name="delnr" id="delnr" value="删除"/></td></tr>';
$('#tab').append(tr);
i++;
});
$("#delnr").live(
"click",
function(){
i--;
$("input:[name='nr"+i+"']").parent().remove();
});
});
------解决方案--------------------
楼主如果你只想用一个按钮来完成删除行,按照从上到下的顺序或者下到上的话
自己写的 但是 功能 不是我要的 希望能理解 删除的时候怎么得到该文本框的id
<table id="tab">
<tr><td> <input type="button" value="点击添加" id="addnr" onClick="addnr()"></td></tr>
</table>
$(function(){
var i=1;
$("#addnr").click(function(){
var tr='<tr id="nr'+i+'"><td><input type="text" name="nr'+i+'" id="nr"+i+"" class="input4" style="width:300px;border-style: solid; border-width: 1px"/><input type="button" name="delnr" id="delnr" value="删除"/></td></tr>';
$('#tab').append(tr);
i++;
});
$("#delnr").live(
"click",
function(){
i--;
$("input:[name='nr"+i+"']").parent().remove();
});
});
------解决方案--------------------
楼主如果你只想用一个按钮来完成删除行,按照从上到下的顺序或者下到上的话
- JScript code
script type="text/javascript">
function delRow(obj) {
$("#tab tr).last().remove();//从下往上删除行
$("#tab tr).first().remove();//从上往下删除行
}
</script>
</head>
<body>
<!--
<table border="1" id="tab">
<tr id="n1"><td>删除我啊1</td><td><input type="button" value="删除" onclick="delRow(this)"/></td></tr>
<tr id="n2"><td>删除我啊2</td><td><input type="button" value="删除" onclick="delRow(this)"/></td></tr>
<tr id="n3"><td>删除我啊3</td><td><input type="button" value="删除" onclick="delRow(this)"/></td></tr>
</table>
-->
<table border="1" id="tab">
<tr id="n1"><td>删除我啊1</td><td>删除我啊1</td></tr>
<tr id="n2"><td>删除我啊2</td><td>删除我啊2</td></tr>
<tr id="n3"><td>删除我啊3</td><td>删除我啊3</td></tr>
</table>
<input type="button" value="删除" onclick="delRow()"/>
------解决方案--------------------
我自己用的方法，你可以参考下：
- JScript code
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
var countline = document.getElementById('countline').value - 1;
var x1=document.getElementById('countline').value=countline;
}
function insRow()
{
var countAll = document.getElementById('countAll').value - 1+2;
var countline = document.getElementById('countline').value -1 +2;
var x=document.getElementById('myTable').insertRow(countline);
var y=x.insertCell(0);
var y1=x.insertCell(1);
var y2=x.insertCell(2);
y.innerHTML="<textarea id='aa"+countAll+"' name='bb"+countAll+"' style='width:97%;' rows='2' ></textarea>";
y1.innerHTML="<select id='cc"+countAll+"' name='dd"+countAll+"' style='width:98%;'><option value=''></option></select>";
y2.innerHTML="<textarea id='ee"+countAll+"' name='ff"+countAll+"' style='width:97%;' rows='2' ></textarea>";
var x1=document.getElementById('countline').value=countline;
var x2=document.getElementById('countAll').value=countAll;
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
