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

Question

我有一个产品订单，有不同尺寸可供选择。 因此，对于每个产品，每个尺寸都有一个输入，行的末尾有总和。 我现实我有大约500行。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

我尝试了几种方法，但它从未想过工作。我只是一次成功计算所有输入，但不仅仅是单独计算一行。

我想在每次输入更改时计算最后td中每行的总和。

有谁知道如何解决这个问题？

Answer 1

绑定input事件处理程序以根据值输入和更新列。

＆＃13;

＆＃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', $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;

＆＃13;

＆＃13;

如果您想将值放入只读文本框中。

＆＃13;

＆＃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;

＆＃13;

＆＃13;

Answer 2

您使用map和reduce

执行此操作

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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