我有一个产品订单,有不同尺寸可供选择。 因此,对于每一种产品,每种尺寸都有一个输入,总和位于行的末尾。 实际上我有大约 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>
我尝试了几种方法,但它从未想过工作。我只成功地一次计算了所有输入,但不仅仅是单独一行。
每次输入更改时,我想计算最后一个 td
中每一行的总和。
有人知道我该如何解决这个问题吗?
最佳答案
将 input
事件处理程序绑定(bind)到基于值的输入和更新列。
$('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
<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>
如果您想将值放在只读文本框中。
$('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
<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>
关于javascript - jQuery:汇总表行中的多个输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37617152/