Foros del Web » Programando para Internet » Javascript »

Tablas dinámicas en JS a partir de un vector

Estas en el tema de Tablas dinámicas en JS a partir de un vector en el foro de Javascript en Foros del Web. Tengo un vector con distintas comida, por ejemplo con el siguiente contenido: Código: [ { id: 1, nombre: "Manzana", precio: 20, codigo: "123", esTemporada: 1, ...
  #1 (permalink)  
Antiguo 15/07/2020, 07:58
Avatar de senseeye3led  
Fecha de Ingreso: abril-2016
Ubicación: 127.0.0.1
Mensajes: 151
Antigüedad: 4 años, 3 meses
Puntos: 9
Pregunta Tablas dinámicas en JS a partir de un vector

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.
  #2 (permalink)  
Antiguo 15/07/2020, 22:03
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.450
Antigüedad: 8 años, 8 meses
Puntos: 939
Respuesta: Tablas dinámicas en JS a partir de un vector

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:
Ver original
  1. var array = [/* Los objetos del array */];
  2.  
  3. function buscar(id){
  4.     for (let i = 0, length = array.length, objeto = "Valor no encontrado"; i < length; i++){
  5.         if (array[i].id == id){
  6.             objeto = array[i];
  7.             break;
  8.         }
  9.     }
  10.     return objeto;
  11. }
  12.  
  13. buscar(5); //{id: 5, nombre: "Kiwi", precio: 6767, codigo: "00112233", esTemporada: 1, origen: "Australia"}
  14.  
  15. 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.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 16/07/2020, 01:23
Avatar de senseeye3led  
Fecha de Ingreso: abril-2016
Ubicación: 127.0.0.1
Mensajes: 151
Antigüedad: 4 años, 3 meses
Puntos: 9
Pregunta Respuesta: Tablas dinámicas en JS a partir de un vector

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.
  #4 (permalink)  
Antiguo 16/07/2020, 12:10
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.082
Antigüedad: 12 años
Puntos: 2224
Respuesta: Tablas dinámicas en JS a partir de un vector

¿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
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 17/07/2020, 00:51
Avatar de senseeye3led  
Fecha de Ingreso: abril-2016
Ubicación: 127.0.0.1
Mensajes: 151
Antigüedad: 4 años, 3 meses
Puntos: 9
Respuesta: Tablas dinámicas en JS a partir de un vector

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:
Ver original
  1. function miEliminarID(vector,id)
  2. {
  3.  tam = document.getElementById("miTabla").rows.length;
  4.  do {
  5.     tam=tam-1;
  6.     document.getElementById("miTabla").deleteRow(tam);
  7. }
  8. while (tam > 0);
  9. miAnyadirObj(id);
  10. }

Añadir/Pintar objeto:
Código Javascript:
Ver original
  1. function miAnyadirObj(obj)
  2. {
  3.     var table = document.getElementById("miTabla");
  4.    
  5.     var row = table.insertRow(0);
  6.    
  7.     var cell1 = row.insertCell(0);
  8.     var cell2 = row.insertCell(1);
  9.     var cell3 = row.insertCell(2);
  10.     var cell4 = row.insertCell(3);
  11.    
  12.     cell1.innerHTML = obj.id;
  13.     cell2.innerHTML = obj.nombre;
  14.     cell3.innerHTML = obj.precio;
  15.     cell4.innerHTML = obj.codigo;
  16. }

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.

Última edición por senseeye3led; 17/07/2020 a las 03:24 Razón: Complementar información
  #6 (permalink)  
Antiguo 18/07/2020, 19:46
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.450
Antigüedad: 8 años, 8 meses
Puntos: 939
Respuesta: Tablas dinámicas en JS a partir de un vector

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:
Ver original
  1. var tbody = document.querySelector("#idTabla tbody");
  2.  
  3. tbody.addEventListener("click", function(event){
  4.     if (event.target.tagName == "TD"){
  5.         let tr = event.target.parentNode;
  6.         tbody.removeChild(tr);
  7.     }
  8. }, false);

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

Código Javascript:
Ver original
  1. var tbody = document.querySelector("#idTabla tbody");
  2.  
  3. tbody.addEventListener("click", function(event){
  4.     if (event.target.tagName == "TD"){
  5.         let tr = event.target.parentNode, datos = [];
  6.         for (let i = 0, children = tr.children, n = children.length; i < n; i++){
  7.             datos.push(children[i].textContent);
  8.         }
  9.     }
  10. }, false);
  11.  
  12. //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.

__________________
«Laissez faire et laissez passer, le monde va de lui même»



La zona horaria es GMT -6. Ahora son las 19:09.