0
282
VisualizaçõesCambiar el color de fondo de la celda de la tabla HTML después de que Javascript lo cambia
Tengo una tabla HTML que da como resultado esto: (Se construye manualmente en HTML y se diseña con CSS a través de las clases rowStyle1 y rowStyle2 )
Cuando el usuario hace clic en los botones para la próxima semana o la semana anterior, la página carga un cronograma y, si hay algún punto de datos para cargar en la tabla, coloca el texto en la celda y cambia el color de fondo con este código:
document.getElementById(cellID).innerText = parsed.title document.getElementById(cellID).style.backgroundColor = "#cc00cc"El problema es que, cuando el usuario quiere cambiar de semana, la tabla debe "limpiarse" y prepararse para los nuevos datos. Eso no sucede a pesar de que puse este código al comienzo de la función que se activa cuando se presiona cualquier botón:
let cells = document.getElementsByClassName("rowStyle1") for (let i = 0; i < cells.length; i++) { cells[i].style.backgroundColor = "#ffffff" } let cells2 = document.getElementsByClassName("rowStyle2") for (let i = 0; i < cells2.length; i++) { cells2[i].style.backgroundColor = "#d8ebfa" }Sé que este código funciona, porque puedo cambiar los colores de las celdas cuando la página se carga por primera vez usando este código, pero todavía deja una celda de color cuando cambio de semana:
¿Cómo cambio el color de la celda para poder "restablecer" la tabla y prepararme para los nuevos datos? ¿Tiene algo que ver con configurar el color a través de javascript?
(Por cierto, todo este código se ha escrito en HTML, CSS y JavaScript nativos, por lo que cualquier solución que no involucre ningún complemento sería muy apreciada).
1 Respostas
Responde à pergunta0
Generalmente es una mala idea establecer estilos directamente con JavaScript. Por lo general, es mejor establecer una clase, ...
(NB: no busque repetidamente referencias de elementos, sino guárdelas):
const cell = document.getElementById(cellID); cell.innerText = parsed.title cell.classList.add("highlighted");... y todo lo que necesita hacer es eliminar esa clase nuevamente, cuando reinicie:
for (let i = 0; i < cells.length; i++) { cells[i].classList.remove("highlighted"); }