javascript - 使用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 为 expenses_sum 的文本框中。

$(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() 获取最近的父 tr，然后使用 find() 获取所有输入。

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

• 删除each() 循环以添加事件处理程序
• 将 calculateSum 的引用提供给事件处理程序，以便您可以使用 this 关键字遍历 DOM
• 为值提供默认值0以简化求和逻辑
• Hook 到 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>