我有一个完美的HTML表格,你会看到有一个空的<th>
,在相应的<td>
中,有一个&#34; 1&#34;。我试图弄清楚的是,无论何时生成新表,如何将1增加到2等等。
var numRows = 2,
ti = 5,
tableCount = 1;
window.standBy = function() {
var sum = 0;
$(".Standby").each(function(index, stand) {
sum += parseFloat($(stand).val());
})
$(".grandtotal").val(sum)
}
function calculate() {
var tr = $(this).closest('tr');
var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
if (hours < 0) hours = 24 + hours;
$(".Hours", tr).val(hours);
if (hours >= 4) $(".Standby", tr).val("1");
if (hours <= 4) $(".Standby", tr).val("0.5");
//if (hours==4 && hours<8) $(".Standby").val("1");
if (hours >= 8 && hours <= 12) $(".Standby", tr).val("1.5");
if (hours > 12) $(".Standby", tr).val("1.5");
}
$('#table').on('change', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('change')
window.addTime = function() {
tableCount++;
$('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
$('#timeTable' + tableCount).find("input").val("");
};
$(document).on('click', 'button.removeTime', function() {
var closestTable = $(this).closest('table');
if (closestTable.attr('id') != "timeTable") {
closestTable.remove();
}
tableCount--;
return false;
});
&#13;
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg .tg-yw4l {
vertical-align: top
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Time format is in 24h</h1>
<div id="table">
<table id="timeTable" class="tg">
<tr>
<th class="tg-yw41"></th>
<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>1</td>
<td class="tg-yw4l"><button class="removeTime">Remove Time</button></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="" readonly="" />
<br>
<button onclick="addTime();">Add Time</button>
<br>
<button onclick="standBy();">Calculate total Standby hours</button>
&#13;
我在这里也有一个工作的JSFiddle:http://jsfiddle.net/3q4v7q07/8/
提前感谢大家的帮助!
答案 0 :(得分:1)
我会在循环表HTML代码中放入一个脚本标记,并使用这些数字为每个标记设置id。拥有脚本标记将在表循环中跟踪的js全局变量。
答案 1 :(得分:1)
incorrect ng
只复制table.not new td或th
答案 2 :(得分:1)
作为评论,删除行并减少索引后,检查它是否小于1.
如果小于将其设置为1默认值。
if (tableCount < 1) {
tableCount = 1;
}
var numRows = 2,
ti = 5;
var tableCount = 1;
var index = 1;
window.standBy = function() {
var sum = 0;
$(".Standby").each(function(index, stand) {
sum += parseFloat($(stand).val());
})
$(".grandtotal").val(sum)
}
function calculate() {
var tr = $(this).closest('tr');
var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
if (hours < 0) hours = 24 + hours;
$(".Hours", tr).val(hours);
if (hours >= 4) $(".Standby", tr).val("1");
if (hours <= 4) $(".Standby", tr).val("0.5");
//if (hours==4 && hours<8) $(".Standby").val("1");
if (hours >= 8 && hours <= 12) $(".Standby", tr).val("1.5");
if (hours > 12) $(".Standby", tr).val("1.5");
}
$('#table').on('change', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('change')
window.addTime = function() {
tableCount++;
$('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
$('#timeTable' + tableCount).find("input").val("");
index++;
$('#timeTable' + tableCount + ' .aa').html(tableCount);
};
$(document).on('click', 'button.removeTime', function() {
var closestTable = $(this).closest('table');
if (closestTable.attr('id') != "timeTable") {
closestTable.remove();
}
tableCount--;
if (tableCount < 1) {
tableCount = 1;
}
return false;
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>
Time format is in 24h
</h1>
<div id="table">
<table id="timeTable" class="tg">
<tr>
<th class="tg-yw41"></th>
<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="aa">1</td>
<td class="tg-yw4l"><button class="removeTime">Remove Time</button></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="" readonly="" />
<br>
<button onclick="addTime();">Add Time</button>
<br>
<button onclick="standBy();">Calculate total Standby hours</button>
&#13;