javascript自动时差功能仅适用于动态创建的表格行的第一行

时间:2019-07-12 19:16:37

标签: javascript html

尝试为动态克隆的表行计算两个输入时间之间的时间差。但是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>

想要在单击相应行的持续时间框时自动计算特定行的时间

0 个答案:

没有答案