我想使用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费用_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));
}

如何为每一行使用此功能。

最佳答案

首先,当它们的唯一性相同时,您重复了相同的id,这意味着您的HTML无效。您应该改用通用类。

为了完成这项工作,您需要限制.expenses选择器,使其仅在与更改的输入相同的行中查找元素。为此,您可以使用closest()来获取最近的父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>

    关于javascript - 使用jquery将一行中所有文本框值的总和,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40929843/

    10-12 12:26
    查看更多