时间戳

首页 > 解决方案 > 当我在同一行复选框上打勾时，如何在另一个表中获取表行数据？

javascript - 当我在同一行复选框上打勾时，如何在另一个表中获取表行数据？

问题描述

我有一个表，其中 4 个字段是服务、金额、税收、操作。
问题是，当我选中任何行中的复选框时，第二个表中也添加了相同的行数据，其中包含服务、金额、税金、操作等表字段。
但我想删除第二个表中的最后一个字段，如操作。
这是我下面的代码

<!DOCTYPE html>
<html>
<head>
    <title>table</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <table border="1" cellspacing="0" id="table1" rules="all" 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 class="tot_amount" data-toggle="checkbox" type="checkbox" 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 class="tot_amount" data-toggle="checkbox" type="checkbox" value="590.00"></td>
            </tr>
        </tbody>
    </table><br>
    <table border="1" cellspacing="0" id="table2" rules="all" 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>
    <script>
       $(document).ready(function(){
         $(document).on("change",".tot_amount",function(){  
         if (this.checked){  


             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>
</body>
</html>

标签： javascriptjqueryhtml

解决方案

检查这个片段。希望能帮助到你！

$(document).ready(function() {
  $(document).on("change", ".tot_amount", function() {
    var $tr = $(this).closest("tr");
    var $trClass = $(this).closest("tr").attr("class");
    if (this.checked) {
      $("#table2 tbody").append("<tr class='"+ $trClass +"'>" + $tr.html() + "</tr>");
      $("#table2 tbody").find('input').parent().remove();
    } else {
    	
      $('#table2').find(".servicetr").each(function() {
        if($tr.hasClass("subscription")){
        	$("#table2").find(".subscription").remove();
        } else if($tr.hasClass("registration")){
        	$("#table2").find(".registration").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 subscription'>
      <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 registration'>
      <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>
    </tr>

  </tbody>
</table>

推荐阅读