Динамическое изменение цвета поля в HTML-коммуне в зависимости от значения

---

Привет, колонки "избыток" и "дефицит" дают мне разницу во времени, проблема в том, что я должен как-то их различать.

Я новичок в этой теме, Дело в том, что если бы значение поля в этих двух столбцах отличалось от 00:00, оно изменило бы цвет на другой.


Но только отдельное поле, а не весь столбец. У кого-нибудь есть идея?


Edit fiddle - JSFiddle[^]

<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>

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);
    }
  }
})

Что я уже пробовал:

I do not know where to start

Примечания: я не хочу использовать id, потому что у меня есть записи старше 30 лет

---