選中復選框時如何獲取不同表中的表行數據？

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">