有2个table A和B,现在要把B中每一行checkbox 选中了的插入到A中的最上面,并且把checkbox这个td节点删除.一下是html代码
表A
<table id="A"><tbody>
<tr><th>姓名</th>......<tr>
<tr><td>李四</td>......</tr>
<tr><td>张三</td>......</tr>
......
</tbody></table>
表B
<table id="B"><tbody>
<tr><th>选择</th><th>姓名</th>......<tr>
<tr><td><input type="checkbox"/></td><td>李四</td>......</tr>
<tr><td><input type="checkbox"/></td><td>张三</td>......</tr>
......
</tbody></table>
<input type="button" onlick="" value="开始从B移动到A">
A和B的区别就是B多了一列是checkbox。
其实我自己也实现了,不过感觉不够优雅,没有充分运用jQuery的内置函数的方便性。
所以来问下
直接看代码和界面截图.用了jquery的子选择器.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../yuanjw_demo.js"></script>
</head>
<body>
<table id="tableA" border = "2">
<tbody>
<tr>
<th>姓名</th>
<tr>
<tr>
<td>王五</td>
</tr>
<tr>
<td>李八</td>
</tr>
<tr>
<td>张久</td>
</tr>
</tbody>
</table>
<BR/>
<table id="tableB" border = "2">
<tbody>
<tr>
<th>选择</th><th>姓名</th><tr>
<tr>
<td><input type="checkbox"/></td><td>李四</td></tr>
<tr>
<td><input type="checkbox"/></td><td>张三</td></tr>
</tbody>
</table>
<input type="button" onlick="" id="btn" value="开始从B移动到A">
</body>
</html>
js代码:
/*表格间移动*/
$(function(){
$("#btn").click(function(){ // 注意用的是 子选择器( > )
var obj = $("#tableB > tbody >tr >td >input[checked = true]").parent().parent();
var tblA = $("#tableA > tbody > tr:eq(1)");
for(var i=obj.length-1;i>=0;i--){
//需要保留表B的行
//tblA.append($(obj[i]).clone());
//不需要保留表B的行
tblA.append(obj[i]);
}
})
})
图一:(执行了克隆)
图二:(没有执行克隆)
帮忙顶一下。JQuery我不太熟...