0
209
VistasResaltar el día laboral de la semana de hoy en una tabla HTML usando solo CSS/Javascript/Jquery
Me gustaría que mi computadora resaltara automáticamente el día de la semana de hoy en una fila de la tabla.
La tabla tiene todos los días de la semana en una fila separada y tiene un número fijo de siete filas, comenzando con el día menos agradable de todos, el lunes o Maandag en holandés.
Digamos que hoy es martes o Dinsdag en holandés, entonces la segunda fila debe resaltarse así:
Sin embargo, el problema es que en lugar del día de hoy, se resalta el día siguiente. Probablemente he pasado por alto algo pequeño. La solución solo puede estar en HTML/CSS/JS/JQuery y no en PHP. He hecho una demostración de mi ejemplo medio defectuoso medio defectuoso:
https://jsfiddle.net/u0bvtzd1/4/
workday(); function workday() { var d = new Date().getDay(); document.getElementById("day-"+d).classList.add('today'); } .today { background-color: #FFD700 !important; } table { border-collapse: collapse; width: 100%; border-spacing: 0; margin: .5em 0; } th, td { padding: 1em; text-align: left; border-bottom: 1px solid #ddd; border-color:black; border-style:solid; border-width:1px; overflow:hidden; word-break:normal; } tr:hover {background-color: #EEE} <table id="weekdagtabel"> <tbody> <tr id="day-1"> <td>Maandag</td> </tr> <tr id="day-2"> <td>Dinsdag</td> </tr> <tr id="day-3"> <td>Woensdag</td> </tr> <tr id="day-4"> <td>Donderdag</td> </tr> <tr id="day-5"> <td>Vrijdag</td> </tr> <tr id="day-6"> <td>Zaterdag</td> </tr> <tr id="day-7"> <td>Zondag</td> </tr> </tbody> </table>2 Respuestas
Responde la pregunta0
Sucede porque el lunes es el primer día de la semana, no el 0.
Comience a numerar los identificadores desde 1, no desde 0
0
La función getDay() devuelve un número del 0 al 6, que indica de domingo a sábado. Dado que los valores de identificación son de lunes a domingo, cambie los números cíclicamente hacia atrás en 1 utilizando el operador de módulo. Al realizar el cambio, Sunday(0) de getDay() se convierte en Sunday(6) en el HTML.
workday(); function workday() { var d = new Date().getDay(); d = (d + 6)%7 document.getElementById("day-"+d).classList.add('today'); }