javascript - 使用 JQuery 迭代 HTML 表(工作时间)的问题

Question

我有一个 HTML 表格，用户可以在其中输入他们的开始时间和结束时间来计算总时数。如果总小时数在 0-4 之间，“待机小时数”文本字段将显示值 0.5，如果“总小时数”在 4-8 之间，“待机小时数”将显示 1 最后，如果“总小时数”在8-12之间，“待机小时数”将显示1.5。

现在，这一切都很完美。

从这里，我找到了一个解决方案，可以生成更多表格供用户输入更多“开始时间”和“结束时间”。问题是计算仅适用于第一个表，而不适用于其他生成的表。

此外，我想知道如何添加从一开始就生成的所有待机时间，并在文本字段“总待机时间”中吐出答案。

这是我的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