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 expense_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以简化求和逻辑
挂钩到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>

Answer 2

这是正确的方法。

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

和js：

$(document).ready(function(){
    $(".expenses").each(function() {

      $(this).keyup(function(){
            sum($(this).parents("tr"));
      });
    });
});
function sum(parent){
    var sum = 0;
    $(parent).find(".expenses").each(function(){
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $(parent).find(".expenses_sum").val(sum.toFixed(2));
}

希望，这有帮助

Answer 3

你可以像这样使用

$(document).on('keyup change','input.expenses',function(){

  $expenses = $(this).parents('tr').find('.expenses');
  $expenseTotal = $(this).parents('tr').find('#expenses_sum');
  $expenseTotal.val('0');
  $.each($expenses,function(index,object){      
    if($(object).val()!='')
    {
       $expenseTotal.val(parseInt($expenseTotal.val())+parseInt($(object).val()));
    }
  });
});

请参阅演示 - https://jsfiddle.net/Vesharj/zLg3pyq4/

使用jquery连续计算所有文本框值的总和

3 个答案: