代码如下:
<!DOCTYPE html> <html> <head> <title>Demo</title> <meta charset="utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#table1 tr:gt(0) input[type='checkbox']").bind("click",function(){ var id= $(this).attr("id"); var name=$(this).parent().next("td").text(); if($(this).is(":checked")){ $("#table2").append("<tr id="+id+"><td>"+name+"</td></tr>"); } else{ $("#table2 #"+id).remove();//这样写失效 //$("#"+id,$("#table2")).remove();//这样写可以 } }) }); </script> </head> <body> One: <table id="table1" border="1"> <tbody> <tr><th></th><th>name</th></tr> <tr><td><input type="checkbox" id="Checkbox1" /></td><td>jim</td></tr> <tr><td><input type="checkbox" id="Checkbox2" /></td><td>tom</td></tr> </tbody> </table> <br/> Two: <table id="table2" border="1"> <tbody> <tr><th>name</th></tr> </tbody> </table> </body> </html>
代码的功能很简单,table1中checkbox选中的话把本行的td添加到table2中,否则从table2中删除。$("#table2 #"+id).remove();这样写失效,换成$("#"+id,$("#table2")).remove();就可以了,有人知道为什么吗?
找到原因了,是因为ID重复造成的:
$("#table2").append("<tr id="+id+"><td>"+name+"</td></tr>");
这一句代码添加了重复的ID