Fatal编程技术网
  • javascript/
  • Javascript 使用一个jquery函数计算多个输入字段的工时

Javascript 使用一个jquery函数计算多个输入字段的工时

javascript jquery

Javascript 使用一个jquery函数计算多个输入字段的工时,javascript,jquery,Javascript,Jquery,我正在尝试建立一个基于网站的“电子表格”，用于计算一组“员工”的工时/劳动。我能够计算出其中一名“员工”的工时，但我无法计算出如何对其他“员工”使用相同的公式/函数。这是我到目前为止能够整理的基本结构 <form> <table id="actual" cellspacing="0px"> <tr> <th>Name</th> <th>Start Time</th>

我正在尝试建立一个基于网站的“电子表格”，用于计算一组“员工”的工时/劳动。我能够计算出其中一名“员工”的工时，但我无法计算出如何对其他“员工”使用相同的公式/函数。这是我到目前为止能够整理的基本结构

<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();
});


名称
开始时间
结束时间
总时间

有效
格雷格·韦兰
艾丽西娅·霍利
查伦·康诺利
达科塔贾尔斯
多诺万·科尔
罗伯特·希尔
道格拉斯斯皮尔斯酒店
$（函数（）{
函数计算（）{
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小时=小时2-小时1，
分钟=0；
如果（小时<0）小时=24+小时；
如果（分钟2>=分钟1）{
分钟=分钟2-分钟1；
}否则{
分钟=（分钟2+60）-分钟1；
小时--；
}
分钟=分钟/60；//以60为单位计算百分比
小时+=分钟；
小时=固定的小时数（2）；
$（“.Hours”）.val（小时）；
}
$（“.Time1，.Time2”）。更改（计算）；
计算（）；
});
任何帮助都将不胜感激，因为我不确定如何让其他员工正确计算时间

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

您可以这样做：（这只是一个想法，但它适用于前两行）

$（函数（）{
函数计算（）{
$（“tr”）。每个（功能（i，el）{
如果（$（this.find（“.Time1”）.length>0）{
var time1=$（this.find（“.time1”）.val（）.split（“：”），
time2=$（this.find（“.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小时=小时2-小时1，
分钟=0；
如果（小时<0）小时=24+小时；
如果（分钟2>=分钟1）{
分钟=分钟2-分钟1；
}否则{
分钟=（分钟2+60）-分钟1；
小时--；
}
分钟=分钟/60；//以60为单位计算百分比
小时+=分钟；
小时=固定的小时数（2）；
$（this.find（“.Hours”）.val（Hours）；
}
});
}
$（“.Time1，.Time2”）。更改（计算）；
计算（）；
});
您可以这样做：（这只是一个想法，但它适用于前两行）

$（函数（）{
函数计算（）{
$（“tr”）。每个（功能（i，el）{
如果（$（this.find（“.Time1”）.length>0）{
var time1=$（this.find（“.time1”）.val（）.split（“：”），
time2=$（this.find（“.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小时=小时2-小时1，
分钟=0；
如果（小时<0）小时=24+小时；
如果（分钟2>=分钟1）{
分钟=分钟2-分钟1；
}否则{
分钟=（分钟2+60）-分钟1；
小时--；
}
分钟=分钟/60；//以60为单位计算百分比
小时+=分钟；
小时=固定的小时数（2）；
$（this.find（“.Hours”）.val（Hours）；
}
});
}
$（“.Time1，.Time2”）。更改（计算）；
计算（）；
});
这里有一种不同的方法，可以用更少的代码完成您的要求。此外，我还通过使用包含所有员工姓名的数组缩短了编写HTML所需的时间。这样，如果您需要添加或删除员工，就更容易了—您只需将其删除或直接添加到列表中，for each循环就会为您创建表行。它使用与上述方法类似的.each（），但使用您正在使用的时间类型输入进行计算

小提琴：

JS

$（函数（）{
var员工=['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.]；
//这个for each循环将把上面数组中的员工姓名写入他们自己的行中
对于（i=0；i
HTML

$(function() { function calculate() { $("tr").each(function(i, el) { if ($(this).find(".Time1").length > 0) { var time1 = $(this).find(".Time1").val().split(':'), time2 = $(this).find(".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); $(this).find(".Hours").val(hours); } }); } $(".Time1,.Time2").change(calculate); calculate(); }); 
$(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);
    });
  });
});

<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>