Javascript jQuery嵌套循环
当前情况： 在第二个表中，我想要一个供应商列表。item.productstock是一个数组，但如何在此追加表中循环它 两个问题 是否可以在第二个tbody中附加for循环？ 是否可以在不创建重复项的情况下为第二个表指定自己的列名Javascript jQuery嵌套循环,javascript,jquery,Javascript,Jquery,当前情况： 在第二个表中，我想要一个供应商列表。item.productstock是一个数组，但如何在此追加表中循环它 两个问题 是否可以在第二个tbody中附加for循环？ 是否可以在不创建重复项的情况下为第二个表指定自己的列名 对于第二个表中的循环，您需要创建一个额外的变量 if (data && Array.isArray(data.results)) { data.results.forEach(item => { const product
对于第二个表中的循环，您需要创建一个额外的变量
if (data && Array.isArray(data.results)) {
data.results.forEach(item => {
const products = item.productstock.forEach((product, index) =>
`<tbody>
<tr>
<td class="text-center"></td>
<td class="font-w600 text-success">${product.vendor_specific_id}</td>
<td class="font-size-sm">${product.distributor}</td>
<td class="font-size-sm">${product.stock}</td>
<td class="font-w600 text-success">${product.price_override}</td>
</tr>
</tbody>`);
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>
${products}`);
});
}
但是你说的列名是什么意思？您可以在forEach函数中使用index second参数来避免重复的名称首先，要在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;
}
}
我必须添加第二个表追加吗？在您的示例中，缺少第一个tbody
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;
}
}