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

Question

столбцы «избыток» и «дефицит» дают мне разницу во времени, проблема в том, что я должен как-то различать guish.

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

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

Редактировать скрипку - 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>

Примечания: Я не хочу использовать идентификатор, потому что у меня есть записи более 30

Значения из двух столбцов обозначают этот случай «избыток» и «дефицит»

Answer 1

Проверьте это jsfiddle: https://jsfiddle.net/9v8pjqna/

В условиях, когда вы проверяете "difMs" из "излишка" или "эффективности", добавьте еще одно простое условие, чтобы проверить, если их значение отличается от 0. В таком случае откройте свойство input 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";
  }
}

Answer 2

Я не пробовал это, но, может быть, вы могли бы сделать это с помощью селектора:

input[type='time', value>='0'] <!-- any value -->