Local Storage循环中使用append，商品项无法换行显示的问题

核心问题 #

你直接将<td>元素追加到#items中，但HTML表格的每行必须用<tr>标签包裹。没有<tr>的话，浏览器会把所有<td>解析到同一个默认行内，导致所有商品挤在一行。

修正步骤 #

1. 用<tr>包裹单商品的所有单元格：每次循环生成一个完整的表格行（包含当前商品的所有<td>），再追加到#items
2. 修正模板字符串的语法错误：按钮ID的拼接在模板字符串里不需要用+，直接用${变量}即可
3. 修正图片标签：HTML中图片标签是<img>，不是<image>

修正后的代码 #

for(item in cart){
    let name = cart[item][1];
    let qty = cart[item][0];
    let image = cart[item][2];
    let price = cart[item][3];
    // 用<tr>包裹所有td，每个商品对应一行
    mystr = `
    <tr>
        <td class="product-thumbnail"><a href="shop-details.html"><img src="${image}" alt="product"></a></td>
        <td class="product-name">${name}</td>
        <td class="product-price"><span class="amount">${price}</span></td>
        <td class="product-quantity">
            <button id="plus${item}" class="btn btn-primary plus">+</button>
            <span id="quantity">${qty}</span>
            <button id="minus${item}" class="btn btn-primary minus">-</button>
        </td>
        <td class="product-subtotal"><span class="amount"></span></td>
        <td class="product-remove"><a href="#"><i class="fa fa-times"></i></a></td>
    </tr>`;

    console.log(mystr);
    $('#items').append(mystr);
}

额外优化建议 #

如果购物车商品较多，建议先把所有HTML字符串拼接完成后再一次性追加，减少DOM操作次数，提升页面性能：

let cartHtml = '';
for(item in cart){
    let name = cart[item][1];
    let qty = cart[item][0];
    let image = cart[item][2];
    let price = cart[item][3];
    cartHtml += `
    <tr>
        <td class="product-thumbnail"><a href="shop-details.html"><img src="${image}" alt="product"></a></td>
        <td class="product-name">${name}</td>
        <td class="product-price"><span class="amount">${price}</span></td>
        <td class="product-quantity">
            <button id="plus${item}" class="btn btn-primary plus">+</button>
            <span id="quantity">${qty}</span>
            <button id="minus${item}" class="btn btn-primary minus">-</button>
        </td>
        <td class="product-subtotal"><span class="amount"></span></td>
        <td class="product-remove"><a href="#"><i class="fa fa-times"></i></a></td>
    </tr>`;
}
$('#items').append(cartHtml);

内容的提问来源于stack exchange，提问作者muneeb rehman