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>