使用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爲該值以簡化總和邏輯
• 掛鉤至change甚至t以及用戶將數據粘貼到現場時的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/