如何使用jquery计算html表中的列和行总和 [英] How to calculating column and row sum in html table using jquery
本文介绍了如何使用jquery计算html表中的列和行总和的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用jQuery计算HTML表格中行和列的总数我试过了，但总列不计算任何人都可以帮我。下面是我的代码：
I want to calculate the total of rows and columns in HTML Table using jquery I tried but the total column is not calculating can anybody help me.Below is my code:
<script>
$(function(){
$('.txtfld').bind({
keyup:function(){
//total calculation
$(".printer-type tr:not(:first, last) td:last-child").text(function () {
var totalVal = 0;
$(this).prevAll().each(function () {
totalVal += parseInt($(this).children('.txtfld').val()) || 0;
//totalVal += parseInt( );
});
return totalVal;
});
$(".printer-type tr:last td").text(function (i) {
var totalVal = 0;
$(this).parent().prevAll().find("td:nth-child(" + (++i) + ")").each(function () {
totalVal += parseInt($(this).children('.txtfld').val()) || 0;
$(".printer-type tr:last td:first").text('Total sheets/year');
});
return totalVal;
});
//Total calculation
}
});
});
</script>
<div class="printer-type">
<table width="580" border="0" class="printer-row">
<tr>
<td> </td>
<td>8X10 in</td>
<td>10X12 in</td>
<td>8X10 in Memmo</td>
<td>10X12 in Memmo</td>
<td>11X14 in</td>
<td>14X14 in</td>
<td>14X17 in</td>
<td>Total sheets/year</td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Item 5700</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>FUJI DRYPIX 400</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>AGFA Drystar 3000</td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td><input type="text" class="txtfld" placeholder="edit"></td>
<td> </td>
</tr>
<tr>
<td>Total sheets/year</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
以上是我添加行和列总数的代码请有人修复此错误。 总张数/年份栏目总数不受影响。
JSFIDDLE
The above is my code to adding the rows and columns total Please anybody fix this bug. The "Total sheets/year" column total is not effecting. JSFIDDLE
推荐答案
tnRB8 /rel =nofollow>小提琴我将此代码添加到您的jquery代码中
if you want the total in the right bottom cell check this
Fiddle i add this code to your jquery code
var count=0
for(i=1;i<$('tr').length;i++){
var trs=parseInt($('tr:eq('+i+')').find('td:last').text())
count+=trs
}
$(".printer-type tr:last td:last").text(count)
如果此解决方案不适合您的需求，我很抱歉让您失去时间。
If this solution does not suit your needs, i apologize for making you lose time.
这篇关于如何使用jquery计算html表中的列和行总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
