jquery插入删除表格时,删除出现问题,请大家帮一把

winer_mokou 2009-08-12
初学jquery,今天遇到一个表格插入删除tr的问题

<table id="showtable" width=100% class="fb_add">
<tr>
<td class="fb_add_content" width="25%"><input name="show_id" type="text" value="1" readonly></td>
<td class="fb_add_content" width="25%"><input name="show_name" type="text"></td>
<td class="fb_add_content" width="25%"><input name="show_value" type="text"></td>
<td class="fb_add_content" width="25%"><a name="show_del" href="#">删除</a></td>
</tr>
</table>

我在这个表格里插入删除行,用的是这个方法

//动态添加指标
$("#show_add").click(function(){
//总行数
var rows=$("#showtable").find("tr").length;
//获取最后一行信息
var last_tr=$("#showtable tr:last");
//复制最后一行并添加到其后面
last_tr.clone(true).find("td").find("input[name='show_id']").val(rows+1).end().end().appendTo(last_tr);
});

//动态删除指标
$("a[name='show_del']").click(function(){
//总行数
var rows=$("#showtable").find("tr").length;
if(rows<=1){
alert("必须保留一行!");
}else{
$(this).parent().parent().remove();
}
});

但是在删除的时候,如果我连续添加了4行,在删除第二行的时候,会把动态添加上的第三行和第四行一同删掉,是不是通过clone复制的行与行之间有依存关系啊?请大家帮忙瞅瞅
jackter 2009-09-27
//动态删除指标
$("a[name='show_del']").click(function...
这部份有问题

可以考虑将"><a name="show_del" href="#">删除</a>中的name属性加一个序列号以区分,就不需要去判断保留几行的问题啦,如下:
<a name="show_del_1" href="#">删除</a>

然后动态删除的指标处可用
$("a[name^='show_del_']").click(function(){
  $(this).....
});
elementstorm 2009-09-27
var rows=1;
	$("#show_add").click(function(){  
		var last_tr=$("#showtable tr:last"); 
		last_tr.clone(true).insertAfter(last_tr).find("input[name='show_id']").val(++rows); 
	}); 
 
	$("a[name='show_del']").click(function(){  
		var rows=$("tr","#showtable").length; 
		if(rows<=1){ 
			alert("必须保留一行!"); 
		}else{ 
			$(this).parent().parent().remove(); 
		} 
	}); 


建议楼主多看看jquery帮助手册...
初出茅庐555 2009-10-15
你动态添加,删除必须给你克隆的每一行加上惟一标示,删除才不会统统删掉.
Global site tag (gtag.js) - Google Analytics