gpt4 book ai didi

javascript - 使用一个 jquery 函数计算多个输入字段的工作时间

转载 作者:行者123 更新时间:2023-12-02 14:47:15 26 4
gpt4 key购买 nike

我正在尝试建立一个基于“电子表格”的网站,该网站将用于计算一组“员工”使用的时间/劳动力。我能够弄清楚如何计算其中一名“员工”的工作时间,但我无法弄清楚如何对其他“员工”使用相同的公式/函数。 This jsfiddle到目前为止我已经能够整理出基本结构。

<form>
<table id="actual" cellspacing="0px">
<tr>
<th>Name</th>
<th>Start Time</th>
<th>End Time</th>
<th>
Total Time
<br/> Worked
</th>
</tr>
<tr>
<th>Greg Weiland</th>
<td>
<input class="Time1" type="time">
</td>
<td>
<input class="Time2" type="time">
</td>
<td>
<input class="Hours">
</td>
</tr>
<tr>
<th>Alicia Hawly</th>
<td>
<input class="Time1" type="time">
</td>
<td>
<input class="Time2" type="time">
</td>
<td>
<input class="Hours">
</td>
</tr>
<tr>
<th>Charlen Connoly</th>
<td>
<input type="time">
</td>
<td>
<input type="time">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>Dakota Giles</th>
<td>
<input type="time">
</td>
<td>
<input type="time">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>Donovan Cole</th>
<td>
<input type="time">
</td>
<td>
<input type="time">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>Robert Hill</th>
<td>
<input type="time">
</td>
<td>
<input type="time">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>Douglas Spirs</th>
<td>

$(function() {
function calculate() {
var time1 = $(".Time1").val().split(':'),
time2 = $(".Time2").val().split(':');
var hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10);
var hours = hours2 - hours1,
mins = 0;
if (hours < 0) hours = 24 + hours;
if (mins2 >= mins1) {
mins = mins2 - mins1;
} else {
mins = (mins2 + 60) - mins1;
hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
$(".Hours").val(hours);
}
$(".Time1,.Time2").change(calculate);
calculate();
});

任何帮助将不胜感激,因为我不确定如何让其他员工正确计算时间。

请注意,我不关心计算是通过单个按钮完成还是通过更改“单元格”的值来完成。

最佳答案

这是一种不同的方法,可以用更少的代码完成您所要求的任务。此外,我还使用包含所有员工姓名的数组来缩短编写所需的 HTML。这使得如果您需要添加或删除员工,就会容易得多 - 您所做的就是将其直接删除或添加到列表中,然后 foreach 循环会为您创建表行。这使用与上面的方法类似的 .each() ,但利用您用来进行数学计算的时间类型输入。

fiddle :https://jsfiddle.net/arcxdff2/10/

JS

$(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').after('<tr class="rowEmployee"><th>' + employees[i] +
'</th><td><input class="Time1" type="time"></td>' +
'<td><input class="Time2" type="time">' +
'</td><td><input class="Hours"></td></tr>')
}

$('#btnSubmit').on('click', 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);
});
});
});

HTML

<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>
<tr>
<td colspan="4" align="center">
<button id='btnSubmit'>Submit</button>
</td>
</tr>
</table>

关于javascript - 使用一个 jquery 函数计算多个输入字段的工作时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36506142/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com