JQueryでHTMLテーブルを反復する際の問題

Question

私は、ユーザーが開始時間と終了時間を入れて合計時間を計算するHTMLテーブルを持っています。合計時間の範囲が0〜4の場合、「待機時間」テキストフィールドには0.5の値が表示され、「時間の合計」が4〜8の範囲にある場合は「待機時間」に1が表示され、 「合計時間」は8-12の範囲で、「スタンバイ時間」は1.5を表示します。

今、これは完全に機能します。

ここから、より多くの「開始時刻」と「終了時刻」を入力するためのテーブルを生成するソリューションが見つかりました。問題は、計算が最初のテーブルに対してのみ機能し、他のテーブルには機能しないことです。

さらに、を追加すると、最初から生成されたすべてのスタンバイ時間がテキストフィールド "Total standby hours"に表示されます。ここで

は私のHTMLコードです：

<h1> 
Time format is in 24h 
</h1> 

<div id="table"> 
<table id="timeTable" class="tg"> 
    <tr> 
    <th class="tg-yw41"></th> 
    <th class="tg-yw4l">Start time</th> 
    <th class="tg-yw4l">End time</th> 
    <th class="tg-yw4l">Hours in total</th> 
    <th class="tg-yw4l">Standby hours</th> 
    </tr> 
    <tr> 
    <td class="tg-yw4l">1</td> 
    <td class="tg-yw4l"><input class="Time1" value="" placeholder="Enter your start time"/></td> 
    <td class="tg-yw4l"><input class="Time2" value="" placeholder="Enter your end time"/></td> 
    <td class="tg-yw4l"><input type="text" class="Hours" value="0" readonly=""/></td> 
    <td class="tg-yw4l"><input type="text" class="Standby" value="0" readonly=""/></td> 
    </tr> 
</table> 
</div> 

<!-- //EXAMPLE OF WHAT HAS TO BE GENERATED 
<table class="tg"> 
    <tr> 
    <th class="tg-yw41"></th> 
    <th class="tg-yw4l">Start time</th> 
    <th class="tg-yw4l">End time</th> 
    <th class="tg-yw4l">Hours in total</th> 
    <th class="tg-yw4l">Standby hours</th> 
    </tr> 
    <tr> 
    <td class="tg-yw4l">2</td> 
    <td class="tg-ywl"><input class="Time1" value="" placeholder="Enter your start time"/></td> 
    <td class="tg-yw4l"><input class="Time2" value="" placeholder="Enter your end time"/></td> 
    <td class="tg-yw4l"><input type="text" class="Hours" value="0" readonly=""/></td> 
    <td class="tg-yw4l"><input type="text" class="Standby" value="0" readonly=""/></td> 
    </tr> 
</table> 
--> 
<caption>Total standby hours</caption>&nbsp;<input class="grandtotal" value=""/> 
<br> 
<button onclick="addTime();">Add Time</button><br> 
<button>Remove Time</button> 

、ここでは私のjQueryのコードです：

var numRows = 2, ti = 5; 
var tableCount = 1; 

$(function() { 
    function calculate() { 
     var hours = parseInt($(".Time2").val().split(':')[0], 10) - parseInt($(".Time1").val().split(':')[0], 10); 
     if(hours < 0) 
      hours = 24 + hours; 

     $(".Hours").val(hours); 

     if (hours>=4) 
      $(".Standby").val("1"); 

     if (hours<=4) 
      $(".Standby").val("0.5"); 

     //if (hours==4 && hours<8) $(".Standby").val("1"); 

     if (hours>=8 && hours<=12) 
      $(".Standby").val("1.5"); 

     if (hours>12) 
      $(".Standby").val("1.5"); 
    } 

    $(".Time1,.Time2").change(calculate); 
    calculate(); 
}); 

window.addTime = function() { 
    tableCount++; 
    $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table'); 

    $('#timeTable' + tableCount).find("input").val(""); 
}; 

var standby1 = $(this).find('input.Standby').val(); 
var standby2 = $(this).find('input.Standby').val(); 

    /*var standbytotal = (standby); //CALCULATE THE TOTAL OF STANDBY HOURS THAT APPEAR 
    $(this).find('input.grandtotal').val(standbytotal ? standbytotal : "");*/ 

私の仕事のJSFiddleもあります：http://jsfiddle.net/44NCk/514/

感謝をすべてのあなたの助けのためにすべての事前に！

Answer 1

合計の合計がstandbyの場合は、$(".Standby")をすべて取得し、すべてループスルーして追加します。あなたの要素の選択で、より具体的である必要はあり

window.standBy = function() { 
    var sum = 0; 
    $(".Standby").each(function(index, stand) { 
    sum += parseFloat($(stand).val()); 
    }) 

    $(".grandtotal").val(sum) 
} 

Updated fiddle