使用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费用_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

你可以这样使用

$(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/

Answer 3

这是执行此操作的正确方法。

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

希望能帮助到你