尝试为动态克隆的表行计算两个输入时间之间的时间差。但是JavaScript仅显示第一行的时差。其余的不会自动计算。
我尝试为其定义类。仍然不工作
function cloneRow() {
var row = document.getElementById("rowToClone");
var table = document.getElementById("dataTable");
var tags = table.getElementsByTagName('tr');
var len = tags.length;
var clone = row.cloneNode(true);
clone.id = "row_" + len;
clone.id = "newID";
table.appendChild(clone);
}
function deleteRow(tableID) {
try {
var table =
document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
function pad(num) {
return ("0" + num).slice(-2);
}
function diffTime(start, end) {
var s = start.split(":"),
sMin = +s[1] + s[0] * 60,
e = end.split(":"),
eMin = +e[1] + e[0] * 60,
diff = eMin - sMin;
if (diff < 0) {
sMin -= 24 * 60;
diff = eMin - sMin
}
var h = Math.floor(diff / 60),
m = diff % 60;
return "" + pad(h) + " hrs:" + pad(m) + " min";
}
function change() {
window.document.getElementById('delay').value = diffTime(
window.document.getElementById('timeOfCall').value,
window.document.getElementById('timeOfResponse').value
);
}
<INPUT type="button" value="Add Row" onclick="cloneRow()" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br><br>
<table id="dataTable" border=1>
<tr>
<th></th>
<th>Start Time</th>
<th>End Time</th>
<th>Duration</th>
</tr>
<tr id="rowToClone">
<TD>
<INPUT type="checkbox" name="chk" />
</TD>
<td><input type="datetime" name="stime" placeholder="hrs:mins" value="hh:mm" id="timeOfCall"></td>
<td><input type="datetime" name="etime" placeholder="hrs:mins" value="hh:mm" id="timeOfResponse"></td>
<td><input type="text" id="delay" class="value" onclick="change(this.value)"> </td>
</tr>
</table>
想要在单击相应行的持续时间框时自动计算特定行的时间