选中复选框时如何获取不同表中的表行数据? [英] How to get table row data in different table when selecting a checkbox?
本文介绍了选中复选框时如何获取不同表中的表行数据?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个表,其中提供了一些字段,例如服务,金额,税金,操作,当单击复选框时,我希望所有表行数据都可以显示在不同的表上,而当我选择另一个复选框时,我想要这个行数据也应该在表的下方添加.
I have a table in which some fields are given, like Service, Amount, tax, Action, When click on checkbox I want the all table row data could show on a different table and when I select the other checkbox I want this row data also should add below it in a 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>
<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">
推荐答案
$(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%;">
这篇关于选中复选框时如何获取不同表中的表行数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文