jQuery：总结表格行中的多个输入答案

【问题标题】：jQuery: sum up multiple inputs in table rowsjQuery：总结表格行中的多个输入
【发布时间】：2016-06-03 14:35:13
【问题描述】：

我有一份产品订购单，有不同尺寸可供选择。因此，对于每种产品，每种尺寸都有一个输入，总和位于行尾。我实际上有大约 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中每一行的总和。

有人知道我该如何解决这个问题吗？

【问题讨论】：

我们不会为你写的。请张贴您的几种方法之一，以便我们帮助您了解哪里出错了。看起来它应该是一个非常简单的$("tr").each() 循环。
在里面你会使用$(this).find("input").each()。

标签： javascript jquery

【解决方案1】：

将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

<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>

【讨论】：

足够接近我的提议就足够了
@MarkSchultheiss : :)
它工作正常，但我的总文本框丢失了。在这个例子中，我知道总数没有显示在文本框中，但在我的情况下，我有一个只读文本框，我想在其中显示总数。有什么想法吗？
@PranavCBalan - 太棒了，完美！！
@Sizzler : 很高兴帮助你:)

【解决方案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);
})

<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>

【讨论】：

在keyUp 事件中它不会被触发，直到我们不会释放那个键。所以最好使用input event

【解决方案3】：

$(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>

【讨论】：