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()を入力してすべての入力を取得します。

もここで行うことができますいくつかのロジックの改善がある点に注意してください。

• あなたがthisキーワードを使用できるよう
• は、イベントハンドラにcalculateSumの参照を提供するイベントハンドラを追加するeach()ループを削除します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/