我有一个 HTML 表格,用户可以在其中输入他们的开始时间和结束时间来计算总时数。如果总小时数在 0-4 之间,“待机小时数”文本字段将显示值 0.5,如果“总小时数”在 4-8 之间,“待机小时数”将显示 1 最后,如果“总小时数”在8-12之间,“待机小时数”将显示1.5。
现在,这一切都完美无缺。
但我想从那里做的是,每当您单击“添加时间”时,都会生成“开始时间、结束时间、总小时数和待机小时数”的第二个表格(我已将它们放在注释中以显示你就是我想要的)。
最后,我想添加整个过程中生成的每个“Standby hours”并将结果放入文本字段:“Total standby hours”。
此外,每当我输入第一个表的开始时间和结束时间数据时,生成的表(我在评论中手动创建的表)似乎会计算我在第一个表中键入的内容。表格的迭代似乎不起作用。
这是我的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/
谢谢大家的帮助!
最佳答案
对于这种情况,我会使用 jquery clone
函数。它几乎可以为您做所有事情。
我更新了你的 jsfiddle给你一个简单的例子。
基本上是这样的:
window.addTime = function () {
$('#timeTable').clone().attr('id', "timeTable2").appendTo('#table');
};
您必须确保 attr
函数中的 ID 不同。递增一个数字并将其添加到时间表 ID 会起作用。
参见 this link了解更多信息。
关于javascript - 在 JQuery 中生成另一个 HTML 表以输入更多小时数进行计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45736452/