Esencialmente, quiero que un usuario pueda hacer clic y mantener presionado el mouse y desplazarse por cualquier cantidad de celdas en la tabla, tan pronto como se desplace por una celda, debería cambiar de color. La cosa es que cuando el usuario hace clic regularmente en una celda, quiero que la celda cambie de color, y tengo un detector de eventos separado que hace eso.
Esta es mi tabla en html
<table class="c-table" onmousedown="hoverColorFill()">y esta es la función js que hice para tratar de manejar la situación de pasar el mouse hacia abajo. Describí esto:
function hoverColorFill(){ elements = document.querySelectorAll(':hover'); for(let i=0; i<elements.length; i++){ elements[i].style.backgroundcolor = colorEl.value } }este es el código que tengo para cuando alguien simplemente hace clic en mi celda:
table.addEventListener('click', (event) => { const rows = document.querySelectorAll('tr'); const rowsArray = Array.from(rows); const rowIndex = rowsArray.findIndex(row => row.contains(event.target)); const columns = Array.from(rowsArray[rowIndex].querySelectorAll('td')); const columnIndex = columns.findIndex(column => column == event.target); document.querySelector(".c-table").tBodies[0].rows[rowIndex-1].cells[columnIndex].style.backgroundColor = colorEl.value })no parece que la función hoverColorFill() funcione, cuando arrastro el mouse sobre mi mesa, se llama a la función (puede imprimir en la consola) pero no cambia los colores. Mi detector de eventos de clic funciona completamente correctamente, pero ocasionalmente da este error: TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'estilo') en HTMLTableElement. pero la función que no funciona no arroja ningún error.
Editar: la razón por la que no estoy usando un eventListener aquí es porque no pude averiguar cómo hacerlo para que preste atención tanto al pasar el mouse como al pasar el mouse.
El código para colorear una celda parece bastante complejo.
Este fragmento solo agrega una clase al elemento.
Sin embargo, debe haber un poco más de complejidad para recordar cuándo el mouse está presionado y, por lo tanto, la coloración debe tener lugar en el movimiento del mouse y recordar cuándo el mouse está levantado.
Los eventos de subida y bajada pueden tener lugar fuera de la tabla, por lo que se detectan en todo el documento.
Además, al mover el mouse cuando está presionado, el valor predeterminado en el navegador generalmente es agregar un color de fondo (se cree que el usuario está haciendo una selección). Este fragmento lo establece en transparente para la tabla, por lo que es más fácil ver el color a medida que sucede.
const table = document.querySelector('table'); let mouseIsDown = false; table.addEventListener('click', function() { event.target.classList.add('colorCell'); }); document.addEventListener('mousedown', function() { mouseIsDown = true; event.target.classList.add('colorCell'); }) document.addEventListener('mouseup', function() { mouseIsDown = false; }); table.addEventListener('mouseover', function() { if (mouseIsDown) event.target.classList.add('colorCell'); }); td.colorCell { background-color: yellow; } table::selection, tr::selection, td::selection { background-color: transparent; } <table> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table>La función colorTd() comprueba si ha hecho clic en un td y luego le agrega una clase
Se activará cuando haga clic en él o arrastre el mouse mientras hace clic
onmousedown y onmouseup verifican si está arrastrando el mouse mientras hace clic. Se almacena en mouseIsDown
Cuando el mouse está sobre la tabla (determinado por onmouseover ) y cuando mouseIsDown es true , la función colorTd() se ejecutará, dando td sa class
const table = document.querySelector("table"); const className = "selected"; let mouseIsDown = false; const colorTd = (e) => (e.target.tagName = "TD" && e.target.classList.add("selected")); table.onclick = (e) => colorTd(e); document.onmousedown = (e) => { mouseIsDown = true; colorTd(e); }; document.onmouseup = () => (mouseIsDown = false); table.onmouseover = (e) => mouseIsDown && colorTd(e); td { cursor: pointer; font-size: 22px; } td.selected { background-color: lightblue; } table::selection, tr::selection, td::selection { background-color: transparent; } <table> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table>