0

este pequeño programa contiene una tabla simple HTML el cual posee dos botones abajo para manipular la celdas.

boton 1: entra en el modo de selección, es decir, la tabla completa se pinta de un color ej:rojo y en este punto, quisiera que a través de eventos como "mouseenter" y "mouseover" se aplique un hover para que al pasar el mouse sobre cada celda se pinte de otro color ej:verde, como indicando mi selección pero no han funcionado.

boton 2: una vez seleccionada la celda con un click, este debe remover los eventos del mouse que causan el hover y tampoco han funcionado.

He logrado aplicar el hover de otra manera pero al presionar el boton secundario los eventos siguen aplicando color a las celdas. Tengo entendido que removeEventListener podría solucionar lo de remover los eventos

Les dejo mi código:

//metodos que añaden y sacan los efectos
function addEffect(td) {
    td.className = 'td-hover';
} 
function remEffect(td) {
    td.className = '';
}

// funcion del boton primario
function cellSelector() {
    table.style.background = 'rgba(30, 105, 204, 0.5)';
    const td = table.getElementsByTagName('td');
    for(let i = 0, j = td.length; i < j; i++) {
        td[i].addEventListener('mouseenter', addEffect(this));                 
        td[i].addEventListener('mouseover', remEffect(this));
    }
}

                                     
// funcion del boton secundario
btn_done.addEventListener('click', () => {
    if (table.style.background != null) {
        table.style.background = 'none';
    }
});

Soy nuevo en JS.

Gracias.

2
  • ¿Puedes poner el archivo html y el archivo css por favor?, de todas formas, creo que esto puede ayudarte: hover, si quieres un hover simplemente ponlo en el .css, no lo gestiones con JavaScript, yo con Javascript gestionaría que le meta y le quite una clase por ejemplo llamada "conEfectoHover" con .addClass("conEfectoHover") y .removeClass("conEfectoHover") y en el css le pones .conEfectoHover:hover{lo que quieras }
    – chikebox
    Commented el 6 jun. 2022 a las 6:37
  • tienes razón, la próxima incrustare html y css pero ya lo he conseguido muchas gracias @chikebox
    – Lester
    Commented el 6 jun. 2022 a las 15:39

1 respuesta 1

1

he aquí la respuesta

se define una clase CSS

.td-hover:hover {
    background:#ff0000;
}

luego con JavaScript se habilita y deshabilita esa clase CSS

// función que habilita la clase CSS con el hover 
function enableCellSelector() {
    // obteniendo celdas de la tabla HTML
    const td = table.querySelectorAll('td');
    for(let i = 0, j = td.length; i < j; i++) {
        //aplicando la clase css a las celdas 
        td[i].classList.add('td-hover');
    }
}

// función que deshabilita la clase CSS con el hover
function disableCellSelector() {
    const td = table.querySelectorAll('td');
    for(let i = 0, j = td.length; i < j; i++) {
        // removiendo clase css a las celdas
        td[i].classList.remove('td-hover');
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.