How do I get table row data in another table when I tic on same row checkbox?
Question
I have a table in which 4 fields are service, amount, tax, action.
The question is when I check the checkbox in any row, the same row data also been adding in the second table with table fields like service, amount, tax, action.
But I want to remove the last field like action in the second table.
Here is my code below
<!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>
2 answers
solution1
1 ACCPTED 2018-07-13 11:20:52
Check this snippet. Hope it helps!
$(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>
solution2
0 2018-07-13 11:28:56
Here's another way to do it; using data-id to identify the row to be removed.
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to get the table row data in an input when I check a checkbox in that same row?
How do I highlight a table row when checkbox is selected? Angular 7
How do I locate elements in the same row as another in a dynamic table?
How to get table row data in different table when selecting a checkbox?
How do I get html multiple row table data to Javascript
How to make entire row along with the checkbox in it, click and unclick when I anywhere click inside the table row?
get table row data on checkbox check
How do I get slideUp() to work as intended on a table row?
How do I add enitre row of data of an table in an array of objects?
jquery how can I get data from html table row
Related Tags