Javascript：Table 列使用 JSON 数据动态构建。行结构损坏

Question

我在我的页面上检索了 2 组数据 (json)：1：仓库 2：物品。对于第一个，我不想在从我的视图中获得 Ajax 搜索响应后动态创建 table 的 TD。

我想为仓库中所有可用的仓库创建所有TD JSON，如果一个产品在这个仓库PK上有库存，同时，我填充QTY

                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>

                    [...]

唉，这是结果：

我注意到，即使我删除循环“for i”，也会在 2 <td> 之间插入一个 <tr></tr>，当我放回循环时，在每个 <td> 之间, <tr> 加注。知道这种行为的原因吗？

Answer 1

尽管之前进行了多次搜索，但我还没有听说过 JS 中的 insertRow() 和 insertCell()。

即使我仍然不明白为什么 innerHTML <td> 不起作用，我用这两个函数更改了我的代码，结果没问题。

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;
             }
         };
    });

Javascript：Table 列使用 JSON 数据动态构建。行结构损坏

Javascript : Table columns build dynamically with JSON datas. Row structure broken

javascript

ajax

html-table

innerhtml