0
我有表格数据。我需要通过将该表内的RowTotal column
的所有行相加来显示表格总数Total
。但在我的循环中,它只取第一行,不包括第二行。 HTML代码:使用jquery得到表中所有行的总和
<table class="view_job cust_view_job table-striped table text-center" style="width: 100%;border:1px solid #ccc">
<thead>
<tr style="background:#2b2e76" ;="">
<th colspan="3" style="padding: 0;">
<p style="color:white">
Bundle Two
</p>
</th>
<th><p style="color:white" class="BundleB773423" id="B7734">Total : <span class="BundelRowTotalB7734">200</span></p></th>
</tr>
<tr>
<th style="width:5%;text-align: center">Qty</th>
<th style="width:5%;text-align: center">Days</th>
<th style="width:10%;text-align: center">Rate</th>
<th style="width:10%;text-align: center">Row Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" value="1" readonly="" autocomplete="off" name="qty[]" placeholder="Qty" class="form-control Qty">
</td>
<td>
<input type="text" value="2" autocomplete="off" name="days[]" placeholder="Days" class="form-control Days">
</td>
<td>
<input type="text" value="100.00" autocomplete="off" id="rate_23" name="rate[]" placeholder="Rate" class="form-control rate">
</td>
<td>
<input type="text" value="200.00" autocomplete="off" readonly="" name="row_total[]" id="row_totalB773423" placeholder="Row Total" class="form-control rowTotal">
</td>
</tr>
<tr>
<td>
<input type="text" value="1" readonly="" autocomplete="off" name="qty[]" placeholder="Qty" class="form-control Qty">
</td>
<td>
<input type="text" value="1" autocomplete="off" name="days[]" placeholder="Days" class="form-control Days">
</td>
<td>
<input type="text" value="200.00" autocomplete="off" id="rate_24" name="rate[]" placeholder="Rate" class="form-control rate">
</td>
<td>
<input type="text" value="200.00" autocomplete="off" readonly="" name="row_total[]" id="row_totalB773424" placeholder="Row Total" class="form-control rowTotal">
</td>
</tr>
</tbody>
</table>
jQuery代码:
var calcObject = {
run: function() {
var id = '';
var sum =bundleSum=qtyVal=daysVal=rateVal=rowtotal =calcVat=daysvalue=ratevalue=FinalRow=Bsum=0;
$(".Qty").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
qtyVal = parseFloat(this.value);
}
daysVal = $(this).closest('tr').find("td:eq(1) input[type='text']").val();
if (!isNaN(daysVal)) {
daysvalue = parseFloat(daysVal);
}
rateVal = $(this).closest('tr').find("td:eq(2) input[type='text']").val();
if (!isNaN(rateVal)) {
ratevalue = parseFloat(rateVal);
}
rowtotal = Math.round(parseFloat(qtyVal)*parseFloat(daysvalue)*parseFloat(ratevalue));
if (!isNaN(rowtotal)) {
FinalRow = parseFloat(rowtotal);
}
id = $(this).closest('tr').find("td:eq(3) input[type='text']").attr('id');
$('#'+id).val(parseFloat(FinalRow).toFixed(2));
});
var BundelID = '';
$(".rowTotal").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
var RowID = $(this).attr('id');
var suffix = RowID.match(/\d+/)[0];
BundelID = $('.BundleB'+suffix).attr('id');
if(RowID.indexOf(BundelID) != -1){
var BValue = $('#'+RowID).val();
if (!isNaN(BValue)) {
Bsum += parseFloat(BValue);
}
}
$('.BundelRowTotal'+BundelID).html(parseFloat(Bsum).toFixed(2));
});
}
};
$(function() {
$(document).on('keyup', '.Days', function() {
calcObject.run();
});
$(document).on('keyup', '.Qty', function() {
calcObject.run();
});
$(document).on('keyup', '.rate', function() {
calcObject.run();
});
$('.rowTotal').change(function() {
calcObject.run();
});
});
小提琴演示在这里:demo here 我不明白的地方我在做错误的。任何建议,请。 谢谢。
学会调试代码:添加'console.l og(BundelID)'在.rowTotal中 - 对于第二行,它没有定义 –
第一个试图找到捆绑匹配'773423'第二'773424'和捆绑行是'BundleB773423',所以只有第一个匹配 –
是啊真的!谢谢我检查 – 06011991