Javascript 在JQuery中生成另一个HTML表，以键入更多要计算的小时数

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

现在，这一切都很完美

但我想从那里做的是，每当你点击“添加时间”，就会生成第二个表格“开始时间、结束时间、总小时数和待机小时数”（我将它们放在评论中，向你展示我想要的内容）

最后，我想添加整个过程中生成的每个“待机时间”，并将结果放入文本字段：“总待机时间”

此外，每当我输入第一个表的开始时间和结束时间数据时，生成的表（我在注释中手动创建的表）似乎会计算我在第一个表中键入的内容。表的迭代似乎不起作用

这是我的HTML代码：

<h1>
Time format: 1:00 = 1 PM / 01:00 = 1 AM
</h1>


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











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

<caption>Total standby hours</caption>&nbsp;<input class="grandtotal" value=""/>
<br>
<button>Add Time</button><br>
<button>Remove Time</button>

var numRows = 2, ti = 5; 

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


 });

 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 : "");*/

时间格式：1:00=1 PM/01:00=1 AM
开始时间
结束时间
总小时数
待机时间
1.
总待机时间


添加时间

删除时间

和我的JQuery：

<h1>
Time format: 1:00 = 1 PM / 01:00 = 1 AM
</h1>


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











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

<caption>Total standby hours</caption>&nbsp;<input class="grandtotal" value=""/>
<br>
<button>Add Time</button><br>
<button>Remove Time</button>

var numRows = 2, ti = 5; 

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


 });

 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 : "");*/

var numRows=2，ti=5；
$（函数（）{
函数计算（）{
var hours=parseInt（$（“.Time2”）.val（）.split（“：”）[0]，10）-parseInt（$（“.Time1”）.val（）.split（“：”）[0]，10）；
如果（小时<0）小时=24+小时；
$（“.Hours”）.val（小时）；
如果（小时数>=4）$（“.Standby”）.val（“1”）；
如果（小时

您只需要创建.append方法，这在上面的答案中进行了解释

希望它能帮助您！
当我动态生成表时，我经常发现以下技巧很有用：




然后使用javascript将表插入div

first_cell_content=”“；
表_html=“”+
""+
“”+第一个单元格内容+“”
""+
"";
document.getElementById（“table_div”）.innerHTML=table_html；
对于本例，我将使用jquery
克隆功能。它几乎可以为您完成所有事情

我更新了你的网站，给你一个简单的例子

基本上：

 window.addTime = function () {
    $('#timeTable').clone().attr('id', "timeTable2").appendTo('#table');
 };

您必须确保在
attr
函数中的id不同。增加一个数字并将其添加到时间表id中会起作用

有关更多信息，请参阅