jQueryを使用して2つのテーブルの相違を計算する

Question

この質問に既に回答があった場合は、答えを見つける場所を教えてください。

私は3つの異なるテーブルを含む "スプレッドシート"スタイルのフォームを設定しています。最初のテーブルには、従業員のリストとその開始時刻/終了時刻、および合計作業時間が表示されます。 2番目の表には、従業員の予定開始時刻/終了時刻/合計時間が含まれます。 3番目の表には、実際の勤務時間と勤務時間数の差が含まれている必要があります。

合計作業時間/作業時間の計算を取得できましたが、差を計算するjqueryの計算式が機能していません。ここで

ページを含むjsfiddleです：https://jsfiddle.net/Dragoonman/6oyauwr8/

jQueryの

// JavaScript Document 
$(document).ready(function() { 
    var employees = ['Greg Weiland', 'Alicia Hawly', 'Charlen Connoly', 
    'Dakota Giles', 'Donovan Cole', 'Robert Hill', 'Douglas Spirs', 
    'Casey Green', 'Jared Peterson', 'Elizabeth P', 'Carl Mark', 
    'Carma J.', 'Ike J.', 'Elias H.' 
    ]; 

    //This for each loop will write the employee names in the array above 
into their own rows 
    for (i = 0; i < employees.length; i++) { 
$('#footer').before('<tr class="rowEmployee"><th>' + employees[i] + 
    '</th><td><input class="Time1" type="text"></td>' + 
    '<td><input class="Time2" type="text">' + 
    '</td><td><input class="Hours"></td></tr>'); 
$('#footer2').before('<tr class="rowSchedule"><td><input class="Time3" type="text"></td>' + 
    '<td><input class="Time4" type="text"></td>' + 
    '<td><input class="Hours2"></td></tr>'); 
$('#footer3').before('<tr class="rowDiff"><td><input class="diff"></td></tr>'); 
    } 

$('.Time2').on('change', function() { 
$('.rowEmployee').each(function() { 
    var time1 = $('.Time1', this).val().split(':'); 
    var time2 = $('.Time2', this).val().split(':'); 
    //The following calculations turn minutes into a fraction to make the math easier 
    var hoursWorked1 = parseInt(time1[0]) + ((parseInt(time1[1]) == 0) ? 0 : (parseInt(time1[1])/60)); 
    var hoursWorked2 = parseInt(time2[0]) + ((parseInt(time2[1]) == 0) ? 0 : (parseInt(time2[1])/60)); 
    //Here is your difference in hours calculation below 
    var diff = hoursWorked2 - hoursWorked1; 
    //Finally, write the total hours worked to the textbox, rounding to nearest hundredth 
    $('.Hours', this).val(Math.round(diff * 100)/100); 
}); 
}); 

$('.Time4').on('change', function() { 
$('.rowSchedule').each(function() { 
    var time1 = $('.Time3', this).val().split(':'); 
    var time2 = $('.Time4', this).val().split(':'); 
    //The following calculations turn minutes into a fraction to make the math easier 
    var hoursWorked1 = parseInt(time1[0]) + ((parseInt(time1[1]) == 0) ? 0 : (parseInt(time1[1])/60)); 
    var hoursWorked2 = parseInt(time2[0]) + ((parseInt(time2[1]) == 0) ? 0 : (parseInt(time2[1])/60)); 
    //Here is your difference in hours calculation below 
    var diff = hoursWorked2 - hoursWorked1; 
    //Finally, write the total hours worked to the textbox, rounding to nearest hundredth 
    $('.Hours2', this).val(Math.round(diff * 100)/100); 
}); 
}); 

$('.Time2').on('change', function() { 
$('.rowDiff').each(function() { 
    var time1 = $('#footer.rowEmployee.Hours', this).val(); 
    var time2 = $('#footer2.rowSchedule.Hours2', this).val(); 
    var diff = time2 - time1; 
    $('.diff', this).val(diff); 
}); 
}); 
}); 

提供できるすべてのヘルプは大幅に

Answer 1

をいただければ幸いHTML

<h3>IMPUT ALL TIMES IN MILITARY FORMAT INCLUDING ":"</h3> 
<h4>*times after midnight for same working day should continue to 25:00+*</h4> 
<table id="actual" cellspacing="0px"> 
    <tr id="header"> 
    <th>Name</th> 
    <th>Start Time</th> 
    <th>End Time</th> 
    <th> 
     Total Time 
     <br/> Worked 
    </th> 
    </tr> 
    <!-- Add the ID of footer so the JS knows where to append the rows containing employee names --> 
    <tr id="footer"> 
    <td colspan="4">&nbsp;</td> 
    </tr> 
</table> 
<table id="schedule" cellspacing="0px"> 
    <tr> 
    <th> 
     Scheduled 
     <br/> Start Time 
    </th> 
    <th> 
     Scheduled 
     <br/> End Time 
    </th> 
    <th> 
     Total Time 
     <br/> Scheduled 
    </th> 
    </tr> 
    <tr id="footer2"> 
    <td colspan="4">&nbsp;</td> 
    </tr> 
</table> 
<table id="difference" cellspacing="0px"> 
    <tr> 
    <th> 
     Difference 
     <br/>&nbsp; 
    </th> 
    </tr> 
    <tr id="footer3"> 
    <td colspan="4">&nbsp;</td> 
    </tr> 
</table> 

私はあなたを提案します各ループのインデックスを追跡して、最後の列の値をラインでプットします。さらに、値が数値かどうかをテストすることをお勧めします。改良点は、入力タイプ= "時間"を使用して入力フェーズを単純化することです。

なぜjQuery.eachを使用しますか？あなたが一発で計算する必要がある場合は、それも列の合計で、それ以外の場合は役に立たない。

私の提案は次のとおりです。

$(function() { 
 
    var employees = ['Greg Weiland', 'Alicia Hawly', 'Charlen Connoly', 
 
        'Dakota Giles', 'Donovan Cole', 'Robert Hill', 'Douglas Spirs', 
 
        'Casey Green', 'Jared Peterson', 'Elizabeth P', 'Carl Mark', 'Carma J.', 'Ike J.', 'Elias H.' 
 
        ]; 
 

 
    //This for each loop will write the employee names in the array above into their own rows 
 
    for (i = 0; i < employees.length; i++) { 
 
    $('#footer').before('<tr class="rowEmployee"><th>' + employees[i] + 
 
         '</th><td><input class="Time1" type="text"></td>' + 
 
         '<td><input class="Time2" type="text">' + 
 
         '</td><td><input class="Hours"></td></tr>'); 
 
    $('#footer2').before('<tr class="rowSchedule"><td><input class="Time3" type="text"></td>' + 
 
         '<td><input class="Time4" type="text"></td>' + 
 
         '<td><input class="Hours2"></td></tr>'); 
 
    $('#footer3').before('<tr class="rowDiff"><td><input class="diff"></td></tr>'); 
 
    } 
 

 
    $('.Time2').on('change', function(e) { 
 
    $('.rowEmployee').each(function(index, element) { 
 
     var time1 = $('.Time1', this).val().split(':'); 
 
     var time2 = $('.Time2', this).val().split(':'); 
 
     //The following calculations turn minutes into a fraction to make the math easier 
 
     var hoursWorked1 = parseInt(time1[0]) + ((parseInt(time1[1]) == 0) ? 0 : (parseInt(time1[1])/60)); 
 
     var hoursWorked2 = parseInt(time2[0]) + ((parseInt(time2[1]) == 0) ? 0 : (parseInt(time2[1])/60)); 
 
     //Here is your difference in hours calculation below 
 
     var diff = hoursWorked2 - hoursWorked1; 
 
     if (!isNaN(diff)) { 
 
     //Finally, write the total hours worked to the textbox, rounding to nearest hundredth 
 
     var time1 = Math.round(diff * 100)/100; 
 
     $('.Hours', this).val(time1); 
 
     var time2 = $('.rowSchedule').eq(index).find('.Hours2').val(); 
 
     if (!isNaN(time2)) { 
 
      $('.diff').eq(index).val(time2 - time1); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 

 
    $('.Time4').on('change', function() { 
 
    $('.rowSchedule').each(function(index, element) { 
 
     var time1 = $('.Time3', this).val().split(':'); 
 
     var time2 = $('.Time4', this).val().split(':'); 
 
     //The following calculations turn minutes into a fraction to make the math easier 
 
     var hoursWorked1 = parseInt(time1[0]) + ((parseInt(time1[1]) == 0) ? 0 : (parseInt(time1[1])/60)); 
 
     var hoursWorked2 = parseInt(time2[0]) + ((parseInt(time2[1]) == 0) ? 0 : (parseInt(time2[1])/60)); 
 
     //Here is your difference in hours calculation below 
 
     var diff = hoursWorked2 - hoursWorked1; 
 
     if (!isNaN(diff)) { 
 
     //Finally, write the total hours worked to the textbox, rounding to nearest hundredth 
 
     var time2 = Math.round(diff * 100)/100; 
 
     $('.Hours2', this).val(time2); 
 
     var time1 = $('.rowEmployee').eq(index).find('.Hours').val(); 
 
     if (!isNaN(time1)) { 
 
      $('.diff').eq(index).val(time2 - time1); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
});

h3, 
 
h4 { 
 
    text-align: center; 
 
} 
 

 
td { 
 
    border: solid thin #000000; 
 
} 
 

 
th { 
 
    border: solid thin #000000; 
 
} 
 

 
#actual { 
 
    float: left; 
 
} 
 

 
#schedule { 
 
    float: left; 
 
    padding-left: 5px; 
 
} 
 

 
#difference { 
 
    padding-left: 3px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 

 
<h3>IMPUT ALL TIMES IN MILITARY FORMAT INCLUDING ":"</h3> 
 
<h4>*times after midnight for same working day should continue to 25:00+*</h4> 
 
<table id="actual" cellspacing="0px"> 
 
    <tr id="header"> 
 
     <th>Name</th> 
 
     <th>Start Time</th> 
 
     <th>End Time</th> 
 
     <th> 
 
      Total Time 
 
      <br/> Worked 
 
     </th> 
 
    </tr> 
 
    <!-- Add the ID of footer so the JS knows where to append the rows containing employee names --> 
 
    <tr id="footer"> 
 
     <td colspan="4">&nbsp;</td> 
 
    </tr> 
 
</table> 
 
<table id="schedule" cellspacing="0px"> 
 
    <tr> 
 
     <th> 
 
      Scheduled 
 
      <br/> Start Time 
 
     </th> 
 
     <th> 
 
      Scheduled 
 
      <br/> End Time 
 
     </th> 
 
     <th> 
 
      Total Time 
 
      <br/> Scheduled 
 
     </th> 
 
    </tr> 
 
    <tr id="footer2"> 
 
     <td colspan="4">&nbsp;</td> 
 
    </tr> 
 
</table> 
 
<table id="difference" cellspacing="0px"> 
 
    <tr> 
 
     <th> 
 
      Difference 
 
      <br/>&nbsp; 
 
     </th> 
 
    </tr> 
 
    <tr id="footer3"> 
 
     <td colspan="4">&nbsp;</td> 
 
    </tr> 
 
</table>