选中复选框时如何获取不同表中的表行数据？

Question

我有一个表，其中提供了一些字段，例如服务，金额，税，操作，当单击复选框时，我希望所有表行数据都可以显示在另一个表上，而当我选择另一个复选框时，我也希望该行数据应该在表格下方添加。

<table cellspacing="0" rules="all" border="1" id="" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Service </th>
            <th scope="col">Amount</th>
            <th scope="col">tax</th>
            <th scope="col">Action</th>
        </tr>
        <tr>
            <td>
                <span>Subscription Charges</span>
            </td>
            <td>
                <span>500.00</span>
            </td>
            <td>
                <span >90.00</span>
            </td>
            <td >
                <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00"  /> 
            </td>
        </tr>
        <tr>
            <td>
                <span>registration fees</span>
            </td>
            <td>
                <span>200.00</span>
            </td>
            <td >
                <span >80.00</span>
            </td>
            <td >
                <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00"  /> 
            </td>
        </tr>
    </tbody>
</table>

<table cellspacing="0" rules="all" border="1" id="" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Service </th>
            <th scope="col">Amount</th>
            <th scope="col">tax</th>
            <th scope="col">Action</th>
        </tr>
    </tbody>    
</table>
<input type="text" name="tot_amount">

Answer 1

 $(document).ready(function(){ $(document).on("change",".tot_amount",function(){ if (this.checked){ var servicetext = $(this).closest("tr").find('td').eq(0).find('span').text(); var totalamt = $('#tot_amount').val(); if(totalamt != ''){ $('#tot_amount').val(totalamt + ", " + servicetext); } else{ $('#tot_amount').val(servicetext); } var $tr = $(this).closest("tr"); $("#table2 tbody").append("<tr class='servicetr'>" + $tr.html() + "</tr>"); } else{ var $tr = $(this).closest("tr"); $('#table2').find(".servicetr").each(function(){ if($tr.html() == $(this).html()) $(this).remove(); }); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;"> <tbody> <tr> <th scope="col">Service </th> <th scope="col">Amount</th> <th scope="col">tax</th> <th scope="col">Action</th> </tr> <tr class='servicetr'> <td class="service"> <span>Subscription Charges</span> </td> <td> <span>500.00</span> </td> <td class="service"> <span >90.00</span> </td> <td > <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" /> </td> </tr> <tr class='servicetr'> <td> <span>registration fees</span> </td> <td > <span>200.00</span> </td> <td > <span >80.00</span> </td> <td > <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" /> </td> </tr> </tbody> </table> <br/> <table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;"> <tbody> <tr> <th scope="col">Service </th> <th scope="col">Amount</th> <th scope="col">tax</th> <th scope="col">Action</th> </tr> </tbody> </table> <br/> <input type="text" name="tot_amount" id="tot_amount" style="width:100%;"> 

Answer 2

尝试以下操作：您可以将复选框的单击处理程序绑定到其中，将TR与子元素一起删除，然后将其推送到另一个表。

 $(document).ready(function(){ $(document).on("change",".tot_amount",function(){ var $tr = $(this).closest("tr"); $("#table2 tbody").append("<tr>" + $tr.html().replace('class="tot_amount"','') + "</tr>"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;"> <tbody> <tr> <th scope="col">Service </th> <th scope="col">Amount</th> <th scope="col">tax</th> <th scope="col">Action</th> </tr> <tr> <td> <span>Subscription Charges</span> </td> <td > <span>500.00</span> </td> <td > <span >90.00</span> </td> <td > <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" /> </td> </tr> <tr> <td> <span>registration fees</span> </td> <td > <span>200.00</span> </td> <td > <span >80.00</span> </td> <td > <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" /> </td> </tr> </tbody> </table> <table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;"> <tbody> <tr> <th scope="col">Service </th> <th scope="col">Amount</th> <th scope="col">tax</th> <th scope="col">Action</th> </tr> </tbody> </table> <input type="text" name="tot_amount">