Javascript 使用JQuery迭代HTML表(工作时间)时出现问题
我有一个HTML表格,用户在其中输入开始时间和结束时间,计算总小时数。如果总小时数范围在0-4之间,“待机小时数”文本字段将显示值0.5,如果“总小时数”范围在4-8之间,“待机小时数”将显示1,最后,如果“总小时数”范围在8-12之间,“待机小时数”将显示1.5 现在,这一切都很完美 从这里,我找到了一个解决方案,可以生成更多的表,供用户输入更多的“开始时间”和“结束时间”。问题是计算只对第一个表有效,而对其他生成的表无效 另外,我想知道如何添加自开始以来生成的所有待机时间,并在文本字段“总待机时间”中给出答案 这是我的HTML代码:Javascript 使用JQuery迭代HTML表(工作时间)时出现问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个HTML表格,用户在其中输入开始时间和结束时间,计算总小时数。如果总小时数范围在0-4之间,“待机小时数”文本字段将显示值0.5,如果“总小时数”范围在4-8之间,“待机小时数”将显示1,最后,如果“总小时数”范围在8-12之间,“待机小时数”将显示1.5 现在,这一切都很完美 从这里,我找到了一个解决方案,可以生成更多的表,供用户输入更多的“开始时间”和“结束时间”。问题是计算只对第一个表有效,而对其他生成的表无效 另外,我想知道如何添加自开始以来生成的所有待机时间,并在文本字段“总待
<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> <input class="grandtotal" value=""/>
<br>
<button onclick="addTime();">Add Time</button><br>
<button>Remove Time</button>
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 : "");*/
时间格式为24小时
开始时间
结束时间
总小时数
待机时间
1.
总待机时间
添加时间
删除时间
这是我的JQuery代码:
<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> <input class="grandtotal" value=""/>
<br>
<button onclick="addTime();">Add Time</button><br>
<button>Remove Time</button>
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 : "");*/
var numRows=2,ti=5;
var tableCount=1;
$(函数(){
函数计算(){
var hours=parseInt($(“.Time2”).val().split(“:”)[0],10)-parseInt($(“.Time1”).val().split(“:”)[0],10);
如果(小时<0)
小时=24小时以上;
$(“.Hours”).val(小时);
如果(小时数>=4)
美元(“.Standby”).val(“1”);
如果(hours表示所有standby
的总和,则可以通过$(“.standby”)
获取所有,然后循环遍历所有并添加它
window.standBy = function() {
var sum = 0;
$(".Standby").each(function(index, stand) {
sum += parseFloat($(stand).val());
})
$(".grandtotal").val(sum)
}
您必须在元素选择中更加具体。而不是使用$(“.Time2”)
(其他字段也是如此),您需要将此限制到当前表行。@Satpal,非常感谢您的帮助,我将检查您的代码,以便将来可以复制它!我还为您的JSFIDLE解决方案添加了一个计算按钮,您是否知道如何添加所有待机时间?:对于动态元素,请使用TR
context@David您只需循环所有“备用”并添加到sum中即可。太好了!感谢所有人的帮助。我将分析您的所有代码,以便将来我可以复制您的答案。祝您一切顺利!