1
我有一個完美的HTML表格，你會看到有一個空的<th>，在那個對應的<td>中，有一個「1」。我試圖找出，是如何增加1到2，等等。每當一個新的表正在生成。用jQuery增加中的數字
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;
});.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
}<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>我也有一個工作的jsfiddle就在這裏：http://jsfiddle.net/3q4v7q07/8/
謝謝大家提前對你的幫助！
只需設置類的編號TD和添加時間點擊添加新的表格發現，TD和設置HTML –
http://jsfiddle.net/3q4v7q07/9/ –
後@yogendarji現在唯一的問題是，無論你什麼時候首先點擊5次刪除時間按鈕，然後點擊添加時間，你都會看到顯示「2」的內容現在顯示爲「-3」，依此類推。 – David