在JQuery中生成另一个HTML表，以输入要计算的更多小时 [英] Generate another HTML table in JQuery to type in more hours to be calculated
问题描述
我有一个HTML表格，用户输入他们的开始时间和结束时间来计算总时数。如果总时数介于0-4之间，则待机时数文本字段将显示值0.5，如果总时数范围介于4-8之间，则待机时间将显示1，最后，如果总小时数范围在8-12之间，待机时间将显示1.5。
I have a table in HTML where the user puts in their start time and their end time which calculates the hours in total. If the hours in total ranges between 0-4, the "standby hours" text field will display the value of 0.5, if the "hours in total" ranges between 4-8, the "standby hours" will display 1 and finally, if the "hours in total" ranges between 8-12, the "standby hours" will display 1.5.
现在，这一切都完美无缺。
Now, this all works perfectly.
但我想从那里做的是，每当你点击添加时间时，第二个表开始时间，结束时间，总时数和待机时间小时生成（我已将它们放在评论中以显示我想要的内容）。
But what I would like to do from there is that whenever you click "Add time", a second table of "Start time, end time, hours in total and standby hours" generates (I have put them in comments to show you what I would like).
最后，我想添加每个待机时间在整个过程中生成并将结果放在文本字段中：总待机时间。
And finally, I would like to add each "Standby hours" that have been generated throughout the way and put the result in the text field: "Total standby hours".
此外，每当我输入第一个的开始时间和结束时间数据时表，似乎生成的表（我在评论中手动创建的表）碰巧计算我在第一个表中键入的内容。该表的迭代似乎不起作用。
Also, whenever I put in the Start time and End time data of the first table, it seems that the generated table (the one I created manually in the comments) happens to calculate whatever I type in my first table. The iteration of the table doesn't seem to work.
这是我的 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> <input class="grandtotal" value=""/>
<br>
<button>Add Time</button><br>
<button>Remove Time</button>
我的 JQuery ：
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 : "");*/
我当然在这里制作了一个JSFiddle： http://jsfiddle.net/44NCk/508/
Now of course I have made a JSFiddle right here: http://jsfiddle.net/44NCk/508/
谢谢大家的帮助！
推荐答案
对于这种情况，我会使用jquery clone 函数。它几乎为你做了一切。
For this case, I would use the jquery clone function. it does pretty much everything for you.
我更新了你的 jsfiddle 给予你是一个简单的例子。
I updated your jsfiddle to give you a quick example.
基本上这样：
window.addTime = function () {
$('#timeTable').clone().attr('id', "timeTable2").appendTo('#table');
};
您必须确保 attr 功能。递增一个数字并将其添加到timeTable id就行了。
You have to make sure the ids are different in the attr function. incrementing a number and adding it to the timeTable id would work.
参见此链接了解更多信息。
这篇关于在JQuery中生成另一个HTML表，以输入要计算的更多小时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
