how to change style of table row depending on cell timestamp value

Question

I have a table that contains a date column. This column has dates from the past to the future including the current time with intervals of approximately 7 min (it may change). I need to color the row which has present value with green and to move green to the next row when the next time is reached. Is it possible to listen to the time value and change style over the rows? I could color the present value but when time goes on, the style doesn't move to the next row since the code executed once on the page load.

Here is my code attempt: I am using vue so in the HTML table part:

<tbody v-for='row in rows' :key='row.id'>
  <tr :style="{'background-color': dateFormat(row.date) ?'green' :'' }">
    ...
  </tr>
</tbody>

and in the methods:

dateFormat(d) {
  const time = new Date(d);
  const cc = new Date();
  if (time.getMinutes() === cc.getMinutes()) return true;
  return false;
}

Any help will be appreciated. Thanks in advance.

Answer 1

There's not too much information of what kind of a table you want to integrate the action to. You can apply the following instructions to achieve what you want.

Make a "model" of the task, at first, read the dates when the active row should change to a JS array ( data in the example code). It's handy to also include the table rows in that array, that saves some time when you don't have to query the DOM to find a row to highlight. Then create some variables to store some information of the state of the task ( current , next ). This information is used to control the state. Finally, create a timer, which runs when ever there's a next date to await. Calculate the delay based on the values you've stored in the model. Something like this:

 // Fill the dates (for the example only) const rows = Array.from(document.querySelector('#traced').rows); fillDates(new Date(), 5); // constant 5 = increase time [second] // A date can be passed to Date constructor as an acceptable string too // Creates the timer (function() { const tbody = document.querySelector('#traced'), rows = Array.from(tbody.rows), data = rows.map(row => { const time = new Date(row.cells[1].textContent).getTime(); // The constant 1 above is the date column number of the table return {row, time}; }); let now = Date.now(), last = data.length - 1, next = data.findIndex(row => row.time > now), current = Math.max(-1, next - 1); if (now > data[last].time) { // All the dates are in the past, no need for a timer data[last].row.classList.add('active'); return; } // Updates row highlighting and counters, the timed function function activateRow() { // Update highlights if (current > 0) { // Remove the current highlight data[current - 1].row.classList.remove('active'); } if (current > -1 && next) { // Highlight the current row data[current].row.classList.add('active'); } // Set the timer if needed if (next > last) {return;} // Quit, no more dates to await const delay = data[next].time - Date.now(); window.setTimeout(activateRow, delay); // Update counters current += 1; next += 1; } activateRow(); }()); // Emulates the server-side dynamic table filling (for the example only) function fillDates(base, gap = 15000) { if (gap < 1000) { gap *= 1000; } gap += Math.floor(Math.random() * 3000); const zone = new Date().getTimezoneOffset(), date = new Date(base).getTime() - zone * 60000; rows.forEach((row, index) => { const dte = new Date(date + gap * index).toISOString(), end = dte.length - 5; row.lastElementChild.textContent = dte.substring(0, end); }); }

 .active { background: green; }

 <table> <tbody id="traced"> <tr><td>Date 1</td><td></td></tr> <tr><td>Date 2</td><td></td></tr> <tr><td>Date 3</td><td></td></tr> <tr><td>Date 4</td><td></td></tr> <tr><td>Date 5</td><td></td></tr> <tr><td>Date 6</td><td></td></tr> </tbody> </table>

When you're integrating the example to your own code, include only the IIFE to your JS code, the other parts of the snippet are there to make it possible to run the code reasonably in StackSnippet nevertheless visitor's timezone. Of course you've to define active class in your CSS too. You should also not include the style of the active row on the server, the JS snippet takes care of the highlighting.

Depending on the date format in the table, you might also need to edit the code according to the used format, and even make changes to the actual dates, because depending on visitor's timezone, the dates you add on the server could be badly off on some other timezone, and the automatic highlighter won't work.

There's also a jsFiddle to play with.