script.js

/**
 * Asociar información a elemento HTML
 * en JavaScript con los atributos de
 * data-*
 * 
 * @author parzibyte
 * 
 * @see https://parzibyte.me/blog
 */
const productos = [{
        id: 1,
        nombre: "Mouse Logitech",
        precio: 20,
        codigo: "123",
    },
    {
        id: 2,
        nombre: "Xiaomi Mi A1",
        precio: 5000,
        codigo: "123444",
    },
    {
        id: 3,
        nombre: "Galletas",
        precio: 10,
        codigo: "20205",
    },
    {
        id: 4,
        nombre: "Computadora portátil",
        precio: 30000,
        codigo: "7700545",
    },
];

// Esta función será llamada cada que se haga clic en el botón
const accionProducto = function() {
    // Recuerda: "this" se refiere al elemento
    const productoComoJson = this.dataset.producto;
    // Debemos decodificarlo
    const producto = JSON.parse(productoComoJson);
    // Y ahora ya podemos acceder a las propiedades del producto
    console.log("El nombre: ", producto.nombre);
    console.log("El id: ", producto.id);
};

// Ahora dibujamos la tabla
const $cuerpoTabla = document.querySelector("#cuerpoTabla");
// Recorrer todos los productos
productos.forEach(producto => {
    // Crear un <tr>
    const $tr = document.createElement("tr");
    // Creamos el <td> de nombre y lo adjuntamos a tr
    let $tdNombre = document.createElement("td");
    $tdNombre.textContent = producto.nombre; // el textContent del td es el nombre
    $tr.appendChild($tdNombre);
    // El td de precio
    let $tdPrecio = document.createElement("td");
    $tdPrecio.textContent = producto.precio;
    $tr.appendChild($tdPrecio);
    // El td del código
    let $tdCodigo = document.createElement("td");
    $tdCodigo.textContent = producto.codigo;
    $tr.appendChild($tdCodigo);
    // El td del botón
    let $tdBoton = document.createElement("td");
    let $boton = document.createElement("button");
    // dataset solo permite guardar cadenas, por eso codificamos como JSON
    $boton.dataset.producto = JSON.stringify(producto);
    $boton.textContent = "Acción";
    // En el click llamamos a la función definida anteriormente
    $boton.addEventListener("click", accionProducto);
    $tdBoton.appendChild($boton);
    $tr.appendChild($tdBoton);
    // Finalmente agregamos el <tr> al cuerpo de la tabla
    $cuerpoTabla.appendChild($tr);
    // Y el ciclo se repite hasta que se termina de recorrer todo el arreglo
});