javascript - 根据值动态更改 HTML 社区中的字段颜色

Question

“盈余”和“不足”两栏给了我时间上的差异，问题是我必须以某种方式区分它们。

我是这个主题的新手，重点是如果这两列中的字段值与 00:00 不同，它会将颜色更改为不同的颜色。

但仅限于单个字段，而不是整个列。有人有想法吗？

Edit fiddle - JSFiddle [^]

带有表格 html 的代码

function diff(start, end) {
  start = start.split(":");
  end = end.split(":");
  const startDate = new Date(0, 0, 0, start[0], start[1], 0);
  const endDate = new Date(0, 0, 0, end[0], end[1], 0);
  let diff = endDate.getTime() - startDate.getTime();
  const hours = Math.floor(diff / 1000 / 60 / 60);
  diff -= hours * 1000 * 60 * 60;
  const minutes = Math.floor(diff / 1000 / 60);
  return (hours <= 9 ? "0" : "") + hours + ":" + (minutes <= 9 ? "0" : "") + minutes;
}

function diffMs(start, end) { // this function can help you calculate a difference for a logical purposes
  return +start.split(":").join('') - +end.split(":").join('');
}
document.querySelector('table').addEventListener('change', function(e) {
  const classList = e.target.classList
  if (classList.contains('start') || classList.contains('end')) {
    //retrieve the associated inputs
    const tr = e.target.parentNode.parentNode
    const [start, end, actual, normative, surplus, deficiency] = [...tr.querySelectorAll('.start,.end,.actual,.normative,.surplus,.deficiency')]
    const value = diff(start.value, end.value);
    actual.value = value
    if (diffMs(actual.value, normative.value) >= 0) {
      surplus.value = diff(normative.value, actual.value);
    }
    if (diffMs(actual.value, normative.value) <= 0) {
      deficiency.value = diff(actual.value, normative.value);
    }
  }
})

<table>
  <thead>
    <tr>
      <th>start</th>
      <th>end</th>
      <th>actual</th>
      <th>normative</th>
      <th>surplus</th>
      <th>deficiency</th>
    </tr>
  </thead>
  <tbody>
    <tr class="day">
      <td><input type="time" class="start" id="start_1" value="08:00"></td>
      <td><input type="time" class="end" id="end_1" value="15:00"></td>
      <td><input type="time" class="actual" id="actual_1" value="07:00" readonly></td>
      <td><input type="time" class="normative" id="normative_1" value="08:00" readonly></td>
      <td><input type="time" class="surplus" id="surplus_1" value="00:00" readonly></td>
      <td><input type="time" class="deficiency" id="deficiency_1" value="00:00" readonly></td>
    </tr>

    <tr class="day">
      <td><input type="time" class="start" id="start_2" value="08:00"></td>
      <td><input type="time" class="end" id="end_2" value="17:00"></td>
      <td><input type="time" class="actual" id="actual_2" value="09:00" readonly></td>
      <td><input type="time" class="normative" id="normative_2" value="08:00" readonly></td>
      <td><input type="time" class="surplus" id="surplus_2" value="00:00" readonly></td>
      <td><input type="time" class="deficiency" id="deficiency_2" value="00:00" readonly></td>
    </tr>
  </tbody>
</table>

注释: 我不想使用 id，因为我有超过 30 条记录

两列中的值指的是这种情况下的“盈余”和“不足”

Answer 1

检查这个jsfiddle:https://jsfiddle.net/9v8pjqna/

在检查“剩余”或“效率”的“差异”的情况下， 添加另一个简单的条件来检查它们的值是否不等于 0。 如果是这样，请访问输入的backgroundColor属性并更改它。

if (diffMs(actual.value, normative.value) >= 0) {
  surplus.value = diff(normative.value, actual.value);
  if(surplus.value != 0) {
    surplus.style.backgroundColor = "red";
  }
}
if (diffMs(actual.value, normative.value) <= 0) {
  deficiency.value = diff(actual.value, normative.value);

  if(deficiency.value != 0) {
    deficiency.style.backgroundColor = "red";
  }
}