0
158
VistasJavascript: las columnas de la tabla se crean dinámicamente con datos JSON. Estructura de fila rota
Recupero en mi página 2 conjuntos de datos (json): 1: almacenes 2: artículos. Con el primero, no quiero crear dinámicamente los TD de mi tabla después de obtener una respuesta de búsqueda de Ajax desde mi vista.
Quiero crear todos los TD para todos los almacenes disponibles en los almacenes JSON y si un producto tiene existencias en este almacén PK, al mismo tiempo, relleno la CANTIDAD
tableBody.innerHTML += ` [...] <td>${item.fournisseur__nom}</td>`; JSON.parse(warehouses).forEach((wh) => { tableBody.innerHTML += ` <td> `; for (let i = 0; i < item.sststock.length; i++) { if (item.sststock[i].sst_id == wh.pk) { tableBody.innerHTML += item.sststock[i].qty; } }; tableBody.innerHTML += ` </td> `; }); tableBody.innerHTML += ` <td>${item.qty}</td> [...] Por desgracia, aquí el resultado: 
Noté que incluso si elimino el ciclo "for i", se inserta un <tr></tr> entre los 2 <td> y cuando vuelvo a colocar el ciclo, entre cada <td> , se eleva un <tr> . ¿Alguna idea sobre la razón de este comportamiento?
1 Respuestas
Responde la pregunta0
A pesar de varias búsquedas anteriores, aún no había oído hablar de insertRow() e insertCell() en JS.
Incluso si todavía no entiendo por qué innerHTML <td> no funcionó, cambié mi código con estas 2 funciones y el resultado es correcto.
const tableBody = document.querySelector('.table-body'); var newRow = tableBody.insertRow(-1); // -1 = at the end of the table var newCell = newRow.insertCell(0); // 0 = at the 0 index newCell.innerHTML = item.etat; [...] JSON.parse(warehouses).forEach((wh) => { var newCell = newRow.insertCell(-1); for (let i = 0; i < item.sststock.length; i++) { if (item.sststock[i].warehouse_id == wh.pk) { newCell.innerHTML = item.sststock[i].qty; } }; });