javascript - jQuery 嵌套循环

Question

现在的情况：

if (data && Array.isArray(data.results)) {
    data.results.forEach(item => {
        table.append
            (`<tbody class="js-table-sections-header table-active">
            <tr>
                <td class="text-center">
                    <i class="fa fa-angle-right"></i>
                </td>
                <td class="font-w600">${item.id}</td>
                <td>
                    <span class="badge badge-success">${item.name}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.vendor}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.desc}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.price}</span>
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td class="text-center"></td>
                <td class="font-w600 text-success">${item.productstock.vendor_specific_id}</td>
                <td class="font-size-sm">${item.productstock.distributor}</td>
                <td class="font-size-sm">${item.productstock.stock}</td>
                <td class="font-w600 text-success">${item.productstock.price_override}</td>
            </tr>                    
        </tbody>`);
    });
}   

在第二个表中，我想要一个供应商列表。item.productstock是一个数组，但我如何在这个附加表中循环它？

两个问题

• 是否可以在第二个 tbody 中附加一个 for 循环？
• 是否可以在不创建重复项的情况下为第二个表提供自己的列名

标签： javascriptjquery

Answer 1

首先，要在内部有一个表tbody，您需要具有tbody>> tr> td>的语义table。

其次，您可以使用函数返回一个字符串，以便在字符串插值中循环。

if (data && Array.isArray(data.results)) {
    data.results.forEach(item => {
        table.append
            (`<tbody class="js-table-sections-header table-active">
                        <tr>
                            <td class="text-center">
                                <i class="fa fa-angle-right"></i>
                            </td>
                            <td class="font-w600">${item.text}</td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <em class="text-muted">${item.price}</em>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <em class="text-muted">${item.price}</em>
                            </td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td class="text-center" colspan="18">
                                <table>
                                    <tr>
                                        <th>vendor_specific_id</th>
                                    </tr>
                                    ${ populateStock(item.productstock) }
                                </table>
                            </td>
                        </tr>
                    </tbody>`);
    });

    function populateStock(productstock) {
        let final_str = '';
        productstock.forEach(item => {
            final_str += `
            <tr>
                <td class="font-w600 text-success">${item.vendor_specific_id}</td>
                <td class="font-size-sm">${item.distributor}</td>
                <td class="font-size-sm">${item.stock}</td>
                <td class="font-w600 text-success">${item.price_override}</td>
            </tr>`
        });
        return final_str;
    }
}