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更改为类。

表行LOOP计算

1 个答案: