我有一个产品订单,有不同尺寸可供选择。 因此,对于每个产品,每个尺寸都有一个输入,行的末尾有总和。 我现实我有大约500行。
<table>
<tr>
<th>Product</th>
<th>Size 1</th>
<th>Size 2</th>
<th>Size 3</th>
<th>TOTAL</th>
</tr>
<tr>
<td>A</td>
<td><input type="text" class="productA"></td>
<td><input type="text" class="productA"></td>
<td><input type="text" class="productA"></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td><input type="text" class="productB"></td>
<td><input type="text" class="productB"></td>
<td><input type="text" class="productB"></td>
<td></td>
</tr>
<tr>
<td>C</td>
<td><input type="text" class="productC"></td>
<td><input type="text" class="productC"></td>
<td><input type="text" class="productC"></td>
<td></td>
</tr>
</table>
&#13;
我尝试了几种方法,但它从未想过工作。我只是一次成功计算所有输入,但不仅仅是单独计算一行。
我想在每次输入更改时计算最后td
中每行的总和。
有谁知道如何解决这个问题?
答案 0 :(得分:4)
绑定input
事件处理程序以根据值输入和更新列。
$('table input').on('input', function() {
var $tr = $(this).closest('tr'); // get tr which contains the input
var tot = 0; // variable to sore sum
$('input', $tr).each(function() { // iterate over inputs
tot += Number($(this).val()) || 0; // parse and add value, if NaN then add 0
});
$('td:last', $tr).text(tot); // update last column value
}).trigger('input'); // trigger input to set initial value in column
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>Product</th>
<th>Size 1</th>
<th>Size 2</th>
<th>Size 3</th>
<th>TOTAL</th>
</tr>
<tr>
<td>A</td>
<td>
<input type="text" class="productA">
</td>
<td>
<input type="text" class="productA">
</td>
<td>
<input type="text" class="productA">
</td>
<td></td>
</tr>
<tr>
<td>B</td>
<td>
<input type="text" class="productB">
</td>
<td>
<input type="text" class="productB">
</td>
<td>
<input type="text" class="productB">
</td>
<td></td>
</tr>
<tr>
<td>C</td>
<td>
<input type="text" class="productC">
</td>
<td>
<input type="text" class="productC">
</td>
<td>
<input type="text" class="productC">
</td>
<td></td>
</tr>
</table>
&#13;
如果您想将值放入只读文本框中。
$('table input').on('input', function() {
var $tr = $(this).closest('tr'); // get tr which contains the input
var tot = 0; // variable to sore sum
$('input:not(:last)', $tr).each(function() { // iterate over inputs except last
tot += Number($(this).val()) || 0; // parse and add value, if NaN then add 0
});
$('td:last input', $tr).val(tot); // update input in last column
}).trigger('input'); // trigger input to set initial value in column
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>Product</th>
<th>Size 1</th>
<th>Size 2</th>
<th>Size 3</th>
<th>TOTAL</th>
</tr>
<tr>
<td>A</td>
<td>
<input type="text" class="productA">
</td>
<td>
<input type="text" class="productA">
</td>
<td>
<input type="text" class="productA">
</td>
<td>
<input type="text" readonly>
</td>
</tr>
<tr>
<td>B</td>
<td>
<input type="text" class="productB">
</td>
<td>
<input type="text" class="productB">
</td>
<td>
<input type="text" class="productB">
</td>
<td>
<input type="text" readonly>
</td>
</tr>
<tr>
<td>C</td>
<td>
<input type="text" class="productC">
</td>
<td>
<input type="text" class="productC">
</td>
<td>
<input type="text" class="productC">
</td>
<td>
<input type="text" readonly>
</td>
</tr>
</table>
&#13;
答案 1 :(得分:2)
您使用map
和reduce
$('tr input').on('input', function() {
//Select all inputs in row of input that is changed and self (this or changed input)
var inputs = $(this).parent('td').siblings('td').andSelf().find('input');
//Use map to return array of only values on inputs in row that is changed
var values = inputs.map(function() { return Number($(this).val())}).get();
//Use reduce to sum array of values
var sum = values.reduce((a, b) => { return a + b});
//Find .result() cell in row that is changed
var result = $(this).parent().siblings('.result');
//Check if sum is number or not and append sum or text msg
(isNaN(sum)) ? result.text('Numbers only') : result.text(sum);
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Product</th>
<th>Size 1</th>
<th>Size 2</th>
<th>Size 3</th>
<th>TOTAL</th>
</tr>
<tr>
<td>A</td>
<td><input type="text" class="productA"></td>
<td><input type="text" class="productA"></td>
<td><input type="text" class="productA"></td>
<td class="result"></td>
</tr>
<tr>
<td>B</td>
<td><input type="text" class="productB"></td>
<td><input type="text" class="productB"></td>
<td><input type="text" class="productB"></td>
<td class="result"></td>
</tr>
<tr>
<td>C</td>
<td><input type="text" class="productC"></td>
<td><input type="text" class="productC"></td>
<td><input type="text" class="productC"></td>
<td class="result"></td>
</tr>
</table>
&#13;
答案 2 :(得分:0)
$(document).on("input", "input:text", function () {
var strClass = $(this).prop("class");
var intTotal = 0;
$.each($("input:text." + strClass), function () {
var intInputValue = parseInt($(this).val());
if (!isNaN(intInputValue))
{
intTotal = intTotal + intInputValue;
}
});
$(this).parent("td").siblings("td:last").text(intTotal);
});
<table>
<tr>
<th>Product</th>
<th>Size 1</th>
<th>Size 2</th>
<th>Size 3</th>
<th>TOTAL</th>
</tr>
<tr>
<td>A</td>
<td><input type="text" class="productA"></td>
<td><input type="text" class="productA"></td>
<td><input type="text" class="productA"></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td><input type="text" class="productB"></td>
<td><input type="text" class="productB"></td>
<td><input type="text" class="productB"></td>
<td></td>
</tr>
<tr>
<td>C</td>
<td><input type="text" class="productC"></td>
<td><input type="text" class="productC"></td>
<td><input type="text" class="productC"></td>
<td></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>