表行LOOP計算

Question

我有一個表中有很多行的表，在那些行中我有很多列進行計算。

目前我通過ID獲取值，但這將更改為ClassName。

現在我的問題是，如何通過每個表行onchange執行以下功能？

function test() {
  var workingHours = moment.duration(8, 'hours');

  var normalSalaryHoursStart = moment('05:00', 'HH:mm');
  var normalSalaryHoursEnd = moment('22:00', 'HH:mm');

  var lateNightTimeHoursStart = moment('22:00', 'HH:mm');
  var lateNightTimeHoursEnd = moment('05:00', 'HH:mm').add(1, 'days');

  var startTime = moment(document.getElementById('start-time').value, 'HH:mm');
  var endTime = moment(document.getElementById('end-time').value, 'HH:mm');
  if (endTime.isSameOrBefore(startTime)) {
    endTime.add(1, 'day');
  }
  var breakTime = moment.duration(document.getElementById('break-time').value);

  var workedHours = document.getElementById('worked-hours').value = parse(
    moment.duration(
      (endTime.clone().subtract(breakTime)).diff(startTime.clone())
    )
  );
  if (document.getElementById('day-name').value === '土  ') {
    var overTime = document.getElementById('over-time').value = workedHours;
  } else {
    var overTime = document.getElementById('over-time').value = parse(
      moment.duration(workedHours).subtract(workingHours)
    );
  }
}

示例表行（有30行）。

<tr onchange="test()">
  <td>
    <select class="form-control">
    <option value="0"></option>
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    <option value="4"></option>
    <option value="5"></option>
  </select>
  </td>

  <td>
    <input id=start-time class="form-control" type="time" name="start">
  </td>

  <td>
    <input id=end-time class="form-control" type="time" name="end">
  </td>

  <td>
    <input id=break-time class="form-control" type="time" name="break">
  </td>

  <td>
    <input id=worked-hours class="form-control" type="time" name="hours" disabled>
  </td>

  <td>
    <input id=over-time class="form-control" type="time" name="off-hours" disabled>
  </td>
  <td>
    <input id=sunday class="form-control" type="time" name="day-off" disabled>
  </td>
  <td>
    <input id=late-night class="form-control" type="time" name="late-night" disabled>
  </td>
  <td>
    <input class="form-control" type="text" name="comment">
  </td>
</tr>

Answer 1

要使此代碼可重用，您真正需要做的就是將選擇器的范圍縮小到單行。

tr.onchange = function() {
  test(this);
};

然后只需將單行傳遞到測試函數中，並將它們用作查詢選擇器的根。

function test(row) {
  var workingHours = moment.duration(8, 'hours');

  var normalSalaryHoursStart = moment('05:00', 'HH:mm');
  var normalSalaryHoursEnd = moment('22:00', 'HH:mm');

  var lateNightTimeHoursStart = moment('22:00', 'HH:mm');
  var lateNightTimeHoursEnd = moment('05:00', 'HH:mm').add(1, 'days');

  var startTime = moment(row.querySelector('.start-time').value, 'HH:mm');
  var endTime = moment(row.querySelector('.end-time').value, 'HH:mm');
  if (endTime.isSameOrBefore(startTime)) {
    endTime.add(1, 'day');
  }
  var breakTime = moment.duration(row.querySelector('.break-time').value);

  var workedHours = row.querySelector('.worked-hours').value = parse(
    moment.duration(
      (endTime.clone().subtract(breakTime)).diff(startTime.clone())
    )
  );
  if (row.querySelector('.day-name').value === '土  ') {
    var overTime = row.querySelector('.over-time').value = workedHours;
  } else {
    var overTime = row.querySelector('.over-time').value = parse(
      moment.duration(workedHours).subtract(workingHours)
    );
  }
}

不要忘記將您的ID更改為課程。