Hola, quiero resaltar la fila que sigue según la hora actual, por lo que si "a" está a las 7 y ahora son las 7:10, quiero que se resalte "b".
Y si "f" está en 1800 y son las 18:10, no quiero resaltar nada hasta las 00:00, entonces quiero resaltar una vez más.
Muchas gracias.
<html> <div id='timeTable'></div> </html> <script> const days = ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag']; const months = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december']; let month = new Date().getMonth() + 1; let d = new Date(); let day = d.getDay(); let date = new Date().getDate(); fetch('https://izaachen.de/api/times/2021/Belgien/Antwerpen%20(Fl%C3%A4mische%20Region).txt/json') .then(data => data.json()) .then(r => fillData(r)); let prayerTimes = []; let prayerNames = ['a', 'b', 'c', 'd', 'e', 'f']; let table = document.createElement('table'); let tableBody = document.createElement('tbody'); function fillData(data) { let today = data.times[month][date]; let i = 0; for (let [key, value] of Object.entries(today)) { prayerTimes[i] = value.t; i++ } fillView(); } function fillView() { for (let i = 0; i < 6; i++) { let tr = document.createElement('tr'); let name = document.createElement('td'); let time = document.createElement('td'); name.innerHTML = prayerNames[i]; time.innerHTML = prayerTimes[i]; tr.appendChild(name); tr.appendChild(time); tableBody.appendChild(tr); table.appendChild(tableBody); } let element = document.getElementById('timeTable').appendChild(table); } </script>Creo que el siguiente ejemplo hace lo que necesita, ejecuta una función cada 3 segundos para verificar si las celdas con la clase .time están en el pasado o no.
Asegúrese de cambiar el temporizador setInterval a algo más sensato, parece que no necesitaría ejecutarlo cada segundo, pero tal vez cada minuto proporcione una sensibilidad más que suficiente.
El resaltado se realiza entonces utilizando CSS , es decir, las clases .past y .future . La siguiente sesión se resalta usando el selector + , que encuentra la primera incidencia de una clase que sigue inmediatamente a la clase anterior, es decir, .past + .future aplica estilos al primer elemento con una clase .future que es un hermano e inmediatamente sigue a un elemento con clase .past .
Los estilos se aplican al tr principal mediante el selector de jquery .closest("tr") .
// Create table dynamically setupTable(); // Set the function to run every 3 seconds checkTime(); v = setInterval(checkTime, 3000); // Check time function function checkTime() { // Get current time const d = new Date(); h = d.getHours(); m = d.getMinutes(); // Print the latest time $("#time-now").text(twoDigits(h)+":"+twoDigits(m)+"." + twoDigits(d.getSeconds())); // Cycle through each time cell $(".time").each(function() { // Get the time from the cell cellTimes = $(this).text().split(":"); cellH = parseInt(cellTimes[0]); cellM = parseInt(cellTimes[1]); // Check if it is in the past if (cellH < h || (cellH == h && cellM < m)) { // Add past classes, remove future classes $(this).closest("tr").addClass("past").removeClass("future"); } else { // Add future class $(this).closest("tr").addClass("future"); } }); } // Standardise times function twoDigits(inNumber) { return inNumber.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }) } // Setup table function setupTable() { d = new Date(); let hour = d.getHours(); min = d.getMinutes() - 2; while (min < d.getMinutes() + 2) { $("#times").append("<tr><td class='time'>" + twoDigits(hour) + ":" + twoDigits(min) + "</td></tr>"); min = min + 1; } } .past { color: red; } .past+.future { background: blue; color: white; } .future { color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="time-now"></div> <table id="times"> <tr> <th>Time</th> </tr> </table>