使用 jquery 对一行中所有文本框值的总和

Question

我想使用 jQuery 对 html 表行中的所有文本框值求和。这是表：

<table border="1">
  <tr>
      <th>sl</th>
      <th>TA</th>
      <th>DA</th>
      <th>HA</th>
      <th>Total</th>
  </tr>
  <tr>
      <td>1</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input id="expenses_sum"></td>
  </tr>
  <tr>
      <td>2</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input id="expenses_sum"></td>
  </tr>
  <tr>
      <td>3</td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td>
      <td><input class="expenses"></td><td>
      <input id="expenses_sum"></td>
  </tr>
</table>

下面是jQuery函数，用于将所有类费用文本框的值相加，并将结果显示在一个id为费用总和的文本框中。

$(document).ready(function() {    
  $(".expenses").each(function() {    
    $(this).keyup(function() {     
      calculateSum();
    });
  });
});    

function calculateSum() {    
  var sum = 0;        
  $(".expenses").each(function() {          
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }    
  });

  $("#expenses_sum").val(sum.toFixed(2));
}

如何对每一行使用这个函数。

Answer 1

首先，id当它们应该是唯一的时，您重复了相同的内容，这意味着您的 HTML 无效。您应该改用公共类。

要完成这项工作，您需要将.expenses选择器限制为仅查找与更改的输入在同一行中的元素。为此，您可以使用closest()获取最近的 parent tr，然后find()获取所有输入。

另请注意，您可以在此处进行多项逻辑改进：

• 删除each()循环以添加事件处理程序
• 提供对calculateSum事件处理程序的引用，以便您可以使用this关键字来遍历 DOM
• 为值提供默认值0以简化求和逻辑
• 挂钩change事件以及keyup用户何时将数据粘贴到字段中。尝试这个：

$(document).ready(function() {
  $(".expenses").on('keyup change', calculateSum);
});

function calculateSum() {
  var $input = $(this);
  var $row = $input.closest('tr');
  var sum = 0;

  $row.find(".expenses").each(function() {
    sum += parseFloat(this.value) || 0;
  });

  $row.find(".expenses_sum").val(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>sl</th>
    <th>TA</th>
    <th>DA</th>
    <th>HA</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>1</td>
    <td><input class="expenses"></td>
    <td><input class="expenses"></td>
    <td><input class="expenses"></td>
    <td><input class="expenses_sum"></td>
  </tr>
  <tr>
    <td>2</td>
    <td><input class="expenses"></td>
    <td><input class="expenses"></td>
    <td><input class="expenses"></td>
    <td><input class="expenses_sum"></td>
  </tr>
  <tr>
    <td>3</td>
    <td><input class="expenses"></td>
    <td><input class="expenses"></td>
    <td><input class="expenses"></td>
    <td><input class="expenses_sum"></td>
  </tr>
</table>