0

Llevo todo el día intentando resolver un ejercicio para clase de Desarrollo de Aplicaciones.

Tengo una web con tres enlaces a noticias. Al hacer click en cada enlace, creo una tabla, en la tabla creo los "tr", uno por noticia, con tres "td" cada uno.

En los dos primeros "tds", inserto un "label" en cada uno con texto.

En el tercer "td" inserto una imagen a la que le doy una "clase" y un "id".

Lo que me está resultando imposible es crear los eventos para esas imágenes. Lo he intentado por su "id" o por su "clase", pero ninguna me funciona

Se perfectamente que algo estoy haciendo mal, pero no logro entender el que.

Alguien me podría dar alguna pista, ayuda o corrección ? GRACIASSSSSS

JAVASCRIT:

function mostrarCabeceras(n) 
{
    let $tBody = $("tbody");
    let contador = 0;

    for (i = 0; i < noticias[n].length; i++)
    {
        let $tr = $("<tr></tr>");
        for (j = 0; j < 3; j++)
        {
            if (j == 0)
            {
                let n1 = contador + 1 + ". ";
                $td = $('<td></td>');
                $td.css("border", "1px solid red");
                $lab = $('<label></label>');
                $lab.width("40px");
                $lab.text(n1);
                $td.append($lab);
                $tr.append($td);
                contador++;
            }
            else if (j == 1)
            {
                let n2 = i + "-" + j;
                $td = $('<td></td>');
                $td.css("border", "1px solid red");
                $lab = $('<label></label>');
                $lab.attr("id", n2);
                $lab.width("600px");
                $lab.text(noticias[n][i]);
                $td.append($lab);
                $tr.append($td);
            }
            else if (j == 2)
            {
                let num3 = i + "-" + j;
                let n3 = num3.toString();
                $td = $('<td></td>');
                $td.css("border", "1px solid red");
                let url = "./img/closed.png";
                let image = new Image();
                image.alt = "Imagen closed";
                image.src = url;
                image.classList.add = "btnImagen";
                image.id = n3;
                $td.append(image);
                $tr.append($td);
            }
        }
        $tBody.append($tr);
    }
}


$(document).ready(function () 
{
    $("#pLNE").on("click", function () 
    {
        limpiarCabeceras();
        mostrarCabeceras(0);
    });
    $("#pEC").on("click", function () 
    {
        limpiarCabeceras();
        mostrarCabeceras(1);
    });
    $("#pEP").on("click", function () 
    {
        limpiarCabeceras();
        mostrarCabeceras(2);
    });
    $("#pDE").on("click", function () 
    {
        limpiarCabeceras();
        mostrarCabeceras(3);
    });
    $("#0-2").on("click", function()
    {
        alerta("0-2");
    });
    $("#1-2").on("click", function()
    {
        alerta("1-2");
    });
    $("#2-2").on("click", function()
    {
        alerta("2-2");
    });
});

HTML:

<div id="noticias">
    <table>
        <caption>
            <h2>
                Últimas Noticias
            </h2>
        </caption>
        <tbody>

        </tbody>
    </table>
</div>

1 respuesta 1

1

Puedes agregar los eventos directamente en la creación de la tabla

Te pongo el estracto que corresponde solo a la cración del td correspondiente a la imagen.

Te agrego tres eventos, uno para el 'click', otro al entrar el ratón en la imagen y otro al salir el ratón, cambiando la imagen

else if (j == 2)
{
    let num3 = i + "-" + j;
    let n3 = num3.toString();
    $td = $('<td></td>');
    $td.css("border", "1px solid red");
    $td.css("cursor", "pointer");
    let url = "./img/closed.png";
    let image = new Image();
    image.alt = "Imagen closed";
    image.src = url;
    image.classList.add = "btnImagen";
    image.id = n3;

    //evento click a la imagen
    image.addEventListener('click', function() {
        //Un mensaje de consola para comprobar el buen funcionamiento del código
        console.log('realizado click en imagen', this.id);
        alerta(this.id);
    });

    //evento al pasar el ratón por encima
    image.addEventListener('mouseover', function() {
        //Un mensaje de consola para comprobar el buen funcionamiento del código
        console.log('Pasado el ratón por encima de la imagen', this.id);
        this.src = "./img/open.png";
    });

    //evento al retirar el ratón de la imagen
    image.addEventListener('mouseout', function() {
        //Un mensaje de consola para comprobar el buen funcionamiento del código
        console.log('retirado el ratón de la imagen', this.id);
        this.src = "./img/closed.png";
    });

    $td.append(image);
    $tr.append($td);

    //Un mensaje de consola para comprobar el buen funcionamiento del código
    console.log("Imagen agregada", image);
}

Creo que los errores vendrán por el tiempo de ejecución, pues creas los eventos con la carga de la página antes incluso de crearse los botones

Espero que la solución te sirva, ya contarás, un saludo

1
  • Pues si señor !!!, lo que estaba buscando. Muchas gracias @el.trasgu
    – Henry
    Commented el 13 abr. 2023 a las 23:43

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.