我已经动态创建了一个表
。页面加载时有一列为空,但当我选择下拉菜单的数量(其他列)和默认价格值(其他列)时,它会填充值。我想使用 jQuery 添加此过程创建的总值并显示总值。
有人知道我该怎么做吗?我已经尝试了很多但没有结果。
我试试这个:
$(document).each("[id^=total]", function(event){
var num = this.id.slice(5);
var sum = 0;
var value = $('#total'+num).text();
sum += parseFloat(this.value);
$('#sum').text(sum);
});
HTML(显示结果的地方):
<tr>
<th colspan="6" style="text-align:right">Total:</th>
<th colspan="2" style="text-align:center"><span id="sum"></span></th>
</tr>
HTML(id='qua2'是1到20的下拉菜单):
<tr>
<td><center><selectclass='choose'id='qua2'></select></center></td>
<td><center><spanid='yprice2'>101.10</span></center></td>
<td><center><spanid='total2'></span></center></td>
</tr>
注意:
列 total
是在表创建之后创建的。我选择了一个下拉列表的值并进行了这个过程(下拉列表的值 * 价格)。结果显示在列总计中。
已更新(我使用此脚本,但 id='sum'
中的结果是 NaN
):
$(document).on('change', "[id^=qua]", function(event){
var num = this.id.slice(3);
var sum = 0;
var value = $("#qua"+num).val();
var yprc = $("#yprice"+num).text();
var amount = value * yprc;
amount = amount.toFixed(2);
var $sum = $("#sum");
var $total = $("#total"+num);
$total.html(amount);
$("[id^=total]").each(function(){
sum += parseFloat($(this).text());
});
$sum.text(sum);
});
最佳答案
我的建议是避免使用 id 并改用类:
calc_total();
$(".choose").on('change', function(){
var parent = $(this).closest('tr');
var price = parseFloat($('.price',parent).text());
var choose = parseFloat($('.choose',parent).val());
$('.total',parent).text(choose*price);
calc_total();
});
function calc_total(){
var sum = 0;
$(".total").each(function(){
sum += parseFloat($(this).text());
});
$('#sum').text(sum);
}
希望这对您有所帮助。
calc_total();
$(".choose").on('change', function(){
var parent = $(this).closest('tr');
var price = parseFloat($('.price',parent).text());
var choose = parseFloat($('.choose',parent).val());
$('.total',parent).text(choose*price);
calc_total();
});
function calc_total(){
var sum = 0;
$(".total").each(function(){
sum += parseFloat($(this).text());
});
$('#sum').text(sum);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td>
<center>
<select class='choose'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</center>
</td>
<td>
<center>
<span class='price'>100</span>
</center>
</td>
<td>
<center>
<span class='total'>100</span>
</center>
</td>
</tr>
<tr>
<td>
<center>
<select class='choose'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</center>
</td>
<td>
<center>
<span class='price'>100</span>
</center>
</td>
<td>
<center>
<span class='total'>100</span>
</center>
</td>
</tr>
<tr>
<td>
<center>
<select class='choose'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</center>
</td>
<td>
<center>
<span class='price'>100</span>
</center>
</td>
<td>
<center>
<span class='total'>100</span>
</center>
</td>
</tr>
<tr>
<th colspan="2" style="text-align:right">Total:</th>
<th colspan="2" style="text-align:center"><span id="sum"></span></th>
</tr>
</table>
关于javascript - 使用 jQuery 对表列的值求和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41166972/