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

在第二个表中，我想要一个 vendor 列表。 item.productstock 是一个数组，但如何在此附加表中循环遍历它？

两个问题

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

Answer 1

首先，里面要有一张 table 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;
    }
}