如果已经提出这个问题，请告诉我在哪里找到答案。
我正在设置一个“电子表格”样式表单，其中包含三个不同的表格。第一个表格将包含员工列表及其开始时间/结束时间以及总工作时间。第二个表将包含员工预定的开始时间/结束时间/总时间。第三个表应包含实际工作时间与预定工作小时数之间的差异。
我已经能够计算工作/计划工作的总时间，但得到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);
});
});
});
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"> </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"> </td>
</tr>
</table>
<table id="difference" cellspacing="0px">
<tr>
<th>
Difference
<br/>
</th>
</tr>
<tr id="footer3">
<td colspan="4"> </td>
</tr>
</table>
非常感谢可以提供的任何帮助
答案 0 :(得分：1)
我建议你跟踪每个循环中的索引，以便你可以计算最后一列的值。此外，我建议你测试一个值是否为数字。改进可能是使用输入类型=＆＃34;时间＆＃34;简化输入阶段。
为什么使用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"> </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"> </td>
</tr>
</table>
<table id="difference" cellspacing="0px">
<tr>
<th>
Difference
<br/>
</th>
</tr>
<tr id="footer3">
<td colspan="4"> </td>
</tr>
</table>