Geo*_*Dim 3 html javascript datatable jquery
我动态创建了一个table. 页面加载时有一列空白，但当我选择下拉菜单的数量（另一列）和默认价格值（另一列）时，它会填充值。我想使用 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);
});
Zak*_*rki 12
我的建议是避免使用 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);
}
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);
}试试这个方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sum Total for Column in jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('table thead th').each(function (i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function () {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<thead>
<tr>
<th>ITEM 1</th>
<th>ITEM 2</th>
<th>ITEM 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td>Total:</td>
<td>Total:</td>
</tr>
</tfoot>
</table>
</body>
</html>希望能帮助到你。