js 动态添加并删除 tr

genglong1024 2012-08-18 03:20:03

自己写的但是功能不是我要的希望能理解删除的时候怎么得到该文本框的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();
});

});

...全文

582 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

YAVA_2009 2012-08-18

打赏
举报

我自己用的方法，你可以参考下：



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;

}

吉他猪 2012-08-18

打赏
举报

楼主如果你只想用一个按钮来完成删除行,按照从上到下的顺序或者下到上的话



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()"/>

重头开始学Java 2012-08-18

打赏
举报

你可以点击按钮删除的时候获取到你tr的id属性。然后通过$('#nri').remove()这样你这个<tr>下的东西都被你删除了

吉他猪 2012-08-18

打赏
举报

或者你可以用 onclick="delRow(this)" js中：$(this).parents("tr").remove()也可以完成删除，这样你就不需要传递id了

吉他猪 2012-08-18

打赏
举报

如果你是需要指定删除某一行的话你可以直接在每行的最后面加入一个button 然后去处理onclick事件,删除该行就可以了，
这个很容易解决直接加上<input type="button" value="删除" onclick="delRow(id)">
就可以了，js就很简单了
用jquery：$("#"+id).remove();id值和你tr中一致就可以了