[英]How do I get table row data in another table when I tic on same row checkbox?
我有一个表，其中 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>
检查这个片段。 希望能帮助到你！
$(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>
这是另一种方法； 使用data-id标识要删除的行。
$(document).ready(function(){ $(document).on("change",".tot_amount",function(){ if (this.checked){ var $tr = $(this).closest("tr").clone(); $tr.find("td").last().remove(); $("#table2 tbody").append($tr); } else { var $trid = $(this).closest("tr").data('id'); $('#table2').find(".servicetr[data-id='" + $trid + "']").remove(); } }); });
<!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 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' data-id="1"> <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' data-id="2"> <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> <br/> </body> </html>
当我选中同一行中的复选框时，如何获取输入中的表行数据？
[英]How to get the table row data in an input when I check a checkbox in that same row?
如何使整行以及其中的复选框都可以单击，然后在我在表行内部单击时单击并取消单击？
[英]How to make entire row along with the checkbox in it, click and unclick when I anywhere click inside the table row?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.