如何让代码显示购物车cartData中所有商品而非仅最后一个？

你当前的代码问题在于每次循环都直接用cartItems.innerHTML = cartHTML覆盖之前的内容，最终只会显示最后一个商品。要实现所有商品的累加显示，只需调整HTML字符串的拼接逻辑：

• 在循环外部初始化一个空的HTML字符串
• 循环内将每个商品的HTML片段追加到这个字符串中
• 循环结束后再一次性把完整的HTML赋值给cartItems.innerHTML

修改后的代码如下：

// 循环外初始化空字符串，用于累加所有商品的HTML
let cartHTML = '';
for (var i = 0; i < cartData.length; i++) {
    this["cartData"+i] = cartData[i];

    // 将当前商品的HTML片段追加到cartHTML
    cartHTML += `
    <tr class="cart-row">
        <td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
        <td><img src="${cartData[i][2]}" alt=""></td>
        <td>${cartData[i][0]}</td>
        <td class="cart-price">DZD ${cartData[i][1]}</td>
        <td><input class="cart-quantity-input" type="number" value="1"></td>
        <td class="cart-sub-total">DZD ${cartData[i][1]}</td>
    </tr>`;
}
// 循环结束后一次性赋值，渲染所有商品
cartItems.innerHTML = cartHTML;

如果想让代码更简洁易读，也可以用map方法实现：

const cartHTML = cartData.map((item, index) => {
    this["cartData"+index] = item;
    return `
    <tr class="cart-row">
        <td><a href="#" type="button" class="cart-remove-button"><i class="far fa-times-circle"></i></a></td>
        <td><img src="${item[2]}" alt=""></td>
        <td>${item[0]}</td>
        <td class="cart-price">DZD ${item[1]}</td>
        <td><input class="cart-quantity-input" type="number" value="1"></td>
        <td class="cart-sub-total">DZD ${item[1]}</td>
    </tr>`;
}).join('');

cartItems.innerHTML = cartHTML;

内容的提问来源于stack exchange，提问作者Mounir Guesbaya