0
私は、ユーザがスタンバイ開始時間とスタンバイ終了時間を入力し、前記テーブルの新しい行を生成してより多くの時間を入力できるHTMLテーブルを持っています。最後に、ユーザーが「計算」をクリックすると、最初から入力された補償時間の合計が計算され、それが表示されます。生成されたHTML/JQueryテーブルの総勤務時間を動的に再計算
私が把握しようとしていることは、行が削除されたときに獲得した総補償時間を動的に再計算する方法です。 $('#table').on('change', ".Time1,.Time2", calculate);をどこかに私の "時間を削除" 機能に：
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("0.5");
if (hours == 4) $(".Standby", tr).val("0.5");
if (hours > 4 && hours < 8) $(".Standby", tr).val("1");
if (hours == 8) $(".Standby", tr).val("1");
if (hours > 8 && hours < 12) $(".Standby", tr).val("1.5");
if (hours == 12) $(".Standby", tr).val("1.5");
if (hours > 12 && hours < 16) $(".Standby", tr).val("2");
if (hours == 16) $(".Standby", tr).val("2");
\t if (hours > 16 && hours < 20) $(".Standby", tr).val("2.5");
if (hours == 20) $(".Standby", tr).val("2.5");
if (hours > 20 && hours < 24) $(".Standby", tr).val("3");
if (hours == 24) $(".Standby", tr).val("3");
if (hours > 24) alert("You cannot exceed a 24 hour period.");
}
$('#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 + ' .increment').html(tableCount);
};
$(document).on('click', 'button.removeTime', function() {
\t var closestTable = $(this).closest('table');
if(closestTable.attr('id') != "timeTable") {
\t \t closestTable.remove();
}
tableCount--;
\t if (tableCount < 1) {
tableCount = 1;
}
\t
\t
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
Time format is in 24h
</h3>
<h6><I>Example: If you want to type in "8 AM", the correct format would be: "8". <br> If you want to type in "8 PM", the correct format would be "20".</I></h6>
<div id="table">
<table id="timeTable" class="tg">
<tr>
<th class="tg-yw41"></th>
<th class="tg-yw41"></th>
<th class="tg-yw4l">Standby Start Time</th>
<th class="tg-yw4l">Standby End Time</th>
<th class="tg-yw4l">Hours in total</th>
<th class="tg-yw4l">Compensatory Hours Earned</th>
</tr>
<tr>
<td class="increment">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>
<hr>
<button onclick="addTime();">Add Time</button>
<br><br>
<button onclick="standBy();">Calculate Total Compensatory Hours Earned</button>
<caption>Total <abbr title="Compensatory">Comp</abbr> hours:</caption>
<input class="grandtotal" value=""readonly="" />私も稼働してJSFiddleを持っている：https://jsfiddle.net/yL9q7gvc/
はあなたの助けのために、事前にあなたのすべてをありがとう！
jsfiddleの設定でjqueryフレームワークを追加する必要があります。 – Snowmonkey