Click here to Skip to main content
14,449,862 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi, the columns 'surplus' and 'deficiency' give me differences in times, the problem is that I have to distinguish them somehow.

I am new in the subject, the point is that if the value of the field in these two columns were different from 00:00 it would change the color to a different one.


But only the individual field, not the entire column. Anyone got an idea?


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


What I have tried:

I do not know where to start


Notes: I don't want to using id because, I have records over 30
Posted
Updated 12-Feb-20 19:13pm
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

You need to add some CSS styling to the appropriate elements. Here's two style classes:
.positive { 
  color: white;
  background-color: green;
 }

.negative {
  color: white;
  background-color: red;
}

In the handler function you then add or remove the class from the appropriate class list.
const timeChangeHandler = (elem) => {
  const [start, end, actual, normative, surplus, deficiency] = [...elem.querySelectorAll('.start,.end,.actual,.normative,.surplus,.deficiency')]
  actual.value = diff(start.value, end.value);
  // Record the difference - only need to perform the calculation once
  const diffValue = diffMs(actual.value, normative.value);
  // Reset element styles - assume surplus & deficiency are both zero
  surplus.classList.remove('positive');
  deficiency.classList.remove('negative');
  // Conditional update
  if (diffValue > 0) {
    surplus.value = diff(normative.value, actual.value);
    // Highlight the positive change
    surplus.classList.add('positive');
  }
  else if (diffValue < 0) {
    deficiency.value = diff(actual.value, normative.value);
    // Highlight the negative change
    deficiency.classList.add('negative');
  }
};

// Execute the timeChangeHandler function on each row of the initial table
document.querySelectorAll('tr.day').forEach(timeChangeHandler);
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100