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

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

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

import {csv} from 'd3-request';

  componentWillMount() {
    csv('./data/test.csv', (error, data) => {
      if (error) {
        this.setState({loadError: true});
      }
      this.setState({
        data: data
      });
    })
  }

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