Tablas dinámicas en JS a partir de un vector

[senseeye3led]

Tengo un vector con distintas comida, por ejemplo con el siguiente contenido:

Código:

[
	{
        id: 1,
        nombre: "Manzana",
        precio: 20,
        codigo: "123",
		esTemporada: 1,
		origen: "España",
    },
    {
        id: 2,
        nombre: "Pera",
        precio: 5000,
        codigo: "123444",
		esTemporada: 0,
		origen: "Brazil",
    },
    {
        id: 3,
        nombre: "Galleta",
        precio: 10,
        codigo: "20205",
		esTemporada: 1,
		origen: "Irlanda"
    },
    {
        id: 4,
        nombre: "Fresa",
        precio: 30000,
        codigo: "7700545",
		esTemporada: 1,
		origen: "España",
    },
	{
        id: 5,
        nombre: "Kiwi",
        precio: 6767,
        codigo: "00112233",
		esTemporada: 1,
		origen: "Australia",
    },
];

Muestro el contenido de algunos campos, cómo nombre, precio y código en una tabla de manera dinámica.

Para pintar la tabla:

Código:

const $cuerpoTabla = document.querySelector("#cuerpoTabla");
// Recorrer todos los productos
for (var i = 0, len = productos.length; i < len; i++){
    // 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 = productos[i].nombre; // el textContent del td es el nombre
    $tr.appendChild($tdNombre);
    // El td de precio
    let $tdPrecio = document.createElement("td");
    $tdPrecio.textContent = productos[i].precio;
    $tr.appendChild($tdPrecio);
    // El td del código
    let $tdCodigo = document.createElement("td");
    $tdCodigo.textContent = productos[i].codigo;
    $tr.appendChild($tdCodigo);
    // Finalmente agregamos el <tr> al cuerpo de la tabla
	alert($cuerpoTabla);
    $cuerpoTabla.appendChild($tr);
    // Y el ciclo se repite hasta que se termina de recorrer todo el vector
};

En el HTML:

Código:

	<table>

            <tbody id="cuerpoTabla">
			
			</tbody>

	</table>

Lo que quiero es:

Hacer una funcion pasandole el id de la comida (siempre será único) y me muestre los campos, nombre, precio, codigo, esTemporada y origen.

Antes de mostrar la información de la comida concreta, quiero eliminar la tabla dinámica, para poder mostrar 1 id (comida) con todos los campos. Vendría a ser cómo más información sobre un id concreto.

Soy capaz de posicionarme en el vector en la posición concreta para un determinado id y así poder coger toda la información, pero no de mostrarlo en el HTML.

Descarto abrir ventanas emergente, quiero poder hacerlo en la misma página recargando o actualizando el contenido.

[Alexis88]

Si buscas obtener el contenido de un objeto en el arreglo a partir del valor del atributo id, bastaría con que le pases a la función el valor a buscar, recorras el arreglo y, en cada iteración, compares el valor del atributo id de cada objeto con el recibido en la función. Si el valor es encontrado, devuelve el objeto en la posición dada y terminas el bucle.

Código Javascript:

var array = [/* Los objetos del array */];
 
function buscar(id){
    for (let i = 0, length = array.length, objeto = "Valor no encontrado"; i < length; i++){
        if (array[i].id == id){
            objeto = array[i];
            break;
        }
    }
    return objeto;
}
 
buscar(5); //{id: 5, nombre: "Kiwi", precio: 6767, codigo: "00112233", esTemporada: 1, origen: "Australia"}
 
buscar(9); //Valor no encontrado
 

Una vez que obtienes el objeto en cuestión, solo necesitarás armar la fila y celdas de la misma manera en la que vienes haciéndolo, pero sin usar el bucle.

[senseeye3led]

Gracias.

La función de buscar un objeto a partir de una id lo tengo funcionando correctamente.

El problema lo tengo a la hora de pintar únicamente ese objeto concreto.

Actualmente muestro en una tabla todos los elementos objetos del array con una información determinada (menos información que la que tiene todo el objeto).

Lo que deseo es:

1) Clickar sobre un objeto determinado.
2) Eliminar / Vaciar toda la información de la tabla.
3) Generar una tabla con el objeto deseado, con toda la información detallada.

[Triby]

¿Cuál es el problema en realidad?

a) No sabes cómo obtener la información del elemento
b) No sabes cómo eliminar la tabla actual
c) No sabes cómo crear la nueva tabla
d) Todas las anteriores

[senseeye3led]

Gracias por la ayuda.

Creo que está solucionado, pero sólo lo sé hacer para IDs.

Eliminar la tabla y pintar/añadir 1 único elemento:

Código Javascript:

function miEliminarID(vector,id)
{
 tam = document.getElementById("miTabla").rows.length;
 do {
    tam=tam-1;
    document.getElementById("miTabla").deleteRow(tam);
}
while (tam > 0);
miAnyadirObj(id);
}
 

Añadir/Pintar objeto:

Código Javascript:

function miAnyadirObj(obj)
{
    var table = document.getElementById("miTabla");
    
    var row = table.insertRow(0);
    
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    
    cell1.innerHTML = obj.id;
    cell2.innerHTML = obj.nombre;
    cell3.innerHTML = obj.precio;
    cell4.innerHTML = obj.codigo;
}
 

Tengo que ver cómo se podría hacer para clases, elementos etc ...

Adjunto también información de un hilo interesante publicado en estos mismos foros sobre innerHTML http://www.forosdelweb.com/f13/inner...esnudo-604511/ que puede ser otro planteamiento posible.

[Alexis88]

Puedes emplear la delegación de eventos a través del objeto event. Básicamente consiste en registrar el evento click en el cuerpo de la tabla y, en la función de escucha, a partir del elemento clickeado (al cual se puede acceder mediante la propiedad target del objeto del evento), que bien puede ser una celda, un botón en una celda, una imagen en una celda, etcétera, tomar a toda la fila que lo contiene y proceder a eliminar del cuerpo de la tabla.

Código Javascript:

var tbody = document.querySelector("#idTabla tbody");
 
tbody.addEventListener("click", function(event){
    if (event.target.tagName == "TD"){
        let tr = event.target.parentNode;
        tbody.removeChild(tr);
    }
}, false);
 

Y, del mismo modo, puedes acceder a todos los datos que contiene esa fila.

Código Javascript:

var tbody = document.querySelector("#idTabla tbody");
 
tbody.addEventListener("click", function(event){
    if (event.target.tagName == "TD"){
        let tr = event.target.parentNode, datos = [];
        for (let i = 0, children = tr.children, n = children.length; i < n; i++){
            datos.push(children[i].textContent);
        }
    }
}, false);
 
//El arreglo "datos" contiene los datos de las celdas de la fila afectada, los cuales podrás administrar a discreción tuya
 

En ambos ejemplos identifiqué al elemento pulsado mediante el nombre de su etiqueta HTML, pero también puedes usar identificadores tales como el id, la clase, un atributo personalizado, etc.