jQuery 将网页中一个表格中的数据已行为最小单元添加到另外的一个表格当中

---

jQuery 将网页中一个表格中的数据已行为最小单元添加到另外的一个表格当中

---

table2的html代码：

 <table id="tab2">
      <tr>
       <th><input type="checkbox" name="all2" /></th>
       <th>编码</th>
       <th>名称</th>
       <th>大类</th>
      </tr>
       <tr>
       <td><input  type="checkbox" name="test2"/></td>
         <td>0103</td>
         <td>财产</td>
         <td>企业</td>
        </tr>
       <tr>
       <td><input  type="checkbox" name="test2"/></td>
        <td>0104</td>
        <td>财产</td>
        <td>企业</td>
       </tr>
       <tr>
       <td><input  type="checkbox" name="test2"/></td>
          <td>0105</td>
          <td>营业</td>
          <td>企业</td>
       </tr>
       <tr>
       <td><input  type="checkbox" name="test2"/></td>
         <td>0106</td>
         <td>现金</td>
         <td>企业</td>
        </tr>
      <tr>
       <td><input  type="checkbox" name="test2"/></td>
           <td>0107</td>
           <td>珠宝</td>
           <td>企业</td>
      </tr>
</table>

table1中的html：

<table  id="tab1">
     <tr id="head">
     <th><input  type="checkbox" name="all1" /></th>
     <th>编码</th>
     <th>名称</th>
     <th>大类</th>
     </tr>
</table>

添加按钮：

<input id="add" type="button" value="添加" />

删除按钮：

<input id="del" type="button" value="删除" />

jQuery实现代码：

*表格中选中行的添加：*

<script>
    $("#add").click(function() {
          var prodHtml = "";
          $("input[name='test2']:checked").each(
                 function() {
                     var tr = $(this).closest("tr");
                     var td = tr.find('td:gt(0)');
                     var code = td[0].innerHTML;
                     var name = td[1].innerHTML;
                     var type = td[2].innerHTML;
                     prodHtml += "<tr>";
                     prodHtml += 
     "<td><input type='checkbox' name='test1'/></td>";
                    prodHtml += "<td>"+ code+ "</td>";
                    prodHtml += "<td>" + name+ </td>";
                    prodHtml += "<td>"+ type+ "</td>";
                    prodHtml += "</tr>";
                $(this).closest("tr").remove();
           });
           $('#tab1').append(prodHtml);
});

</script>

table1实现删除：

$("#del")
                                .bind(
                                        "click",
                                        function() {

                                            var prodHtml2 = "";
                                            $("input[name='test1']:checked")
                                                    .each(
                                                            function() {
                                                                var tr = $(this)
                                                                        .closest(
                                                                                "tr");
                                                                var td = tr
                                                                        .find('td:gt(0)');
                                                                var code = td[0].innerHTML;
                                                                var name = td[1].innerHTML;
                                                                var type = td[2].innerHTML;
                                                                prodHtml2 += "<tr>";
                                                                prodHtml2 += "<td><input type='checkbox' name='test2'/></td>";
                                                                prodHtml2 += "<td>"
                                                                        + code
                                                                        + "</td>";
                                                                prodHtml2 += "<td>"
                                                                        + name
                                                                        + "</td>";
                                                                prodHtml2 += "<td>"
                                                                        + type
                                                                        + "</td>";
                                                                prodHtml2 += "</tr>";
                                                                $(this)
                                                                        .closest(
                                                                                "tr")
                                                                        .remove();

                                                            });
                                            $('#tab2').append(prodHtml2);

                                        });

实现全选：

$('input[name="all2"]').click(function() {
 $('input[name="test2"]').attr("checked",this.checked);
});
$("input[name='test2']").click(function() {
    $("[name='all2']").attr("checked",
    $("input[name='test2']").length ==      $("input[name='test2']:checked").length ? true
: false);
});