如何對輸入字段的行和列求和
[英]How to sum input fields row and column
問題描述
我進行了很多搜索，找不到解決方案，並且由於我的代碼能力受到一定限制，因此我尋求幫助。
我正在嘗試做的正是在這里找到的內容： http : //jsfiddle.net/unKDk/335/
$(function(){
var $iTableTotals = $("#iTable .colTotal");
var $eTableTotals = $("#eTable .colTotal");
var $diffValues = $(".diffValue");
$(".colTotal").on('change keyup', function() {
$iTableTotals.each(function(i){
var diff = Number($iTableTotals.eq(i).val()) - Number($eTableTotals.eq(i).val());
$diffValues.eq(i).val(diff);
});
});
$iTableTotals.eq(0).change();
});
但是我想輸入字段而不是預載數字。 澄清一下，我在網上找到了此代碼，我不是該代碼的作者。
謝謝。
2 個解決方案
解決方案1
0 2014-07-26 22:32:38
請嘗試使用以下代碼段。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
getTotal();
$(".txtNumber").change(function () {
getTotal();
});
});
function getTotal() {
$("#sum_table tr:not(:first,:last) td:last-child").text(function () {
var t = 0;
$(this).prevAll().each(function () {
t += parseInt($(this).find('input').val(), 10) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function (i) {
var t = 0;
$(this).parent().prevAll().find("td:nth-child(" + (i + 2) + ")").each(function () {
t += parseInt($(this).find('input').val(), 10) || 0;
});
return "Total: " + t;
});
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td></td>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Strawberry</td>
<td>Total By Row</td>
</tr>
<tr>
<td>Row1</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="2" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row2</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="2" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row3</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="5" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</table>
</body>
</html>
解決方案2
0 已采納 2014-07-26 22:41:38
並非完全100％知道使用輸入字段而不是預載數字的含義。 請查看分叉的小提琴，希望這就是您的意思： http : //jsfiddle.net/B9EWd/
HTML：
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td></td>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Strawberry</td>
<td>Total By Row</td>
</tr>
<tr>
<td> Row1</td>
<td class="rowAA"><input value="7" /></td>
<td class="rowAA"><input value="2" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA"><input value="1" /></td>
<td class="rowAA"><input value="2" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row3</td>
<td class="rowAA"><input value="1" /></td>
<td class="rowAA"><input value="5" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</table>
使用Javascript：
function updateTotals() {
$("#sum_table tr:not(:first,:last) td:last-child").text(function(){
var t = 0;
$(this).prevAll().find("input").each(function(){
t += parseInt( $(this).val(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i + 2)+") input").each(function(){
t += parseInt( $(this).val(), 10 ) || 0;
});
return "Total: " + t;
});
}
$( "input" ).change( updateTotals );
updateTotals();
如何在javascript中自動求和動態輸入字段
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.