POS应用账单页开发：如何将对象数组图片追加至HTML表格行？

核心问题分析 #

你的代码存在几个关键问题导致图片无法正常追加到表格行：

1. 从localStorage获取的cart是包含data数组的对象，而非直接的数组，因此buildTable函数中循环data.length会失效（对象没有length属性）。
2. 原始food对象的每个元素最后一个属性后带有多余逗号，不符合JSON规范，会导致JSON.parse解析失败。
3. 反复使用table.innerHTML += row会触发多次DOM重绘，性能较差。

修正后的完整代码 #

1. 修正JSON格式的数据源（初始化存入localStorage用）

var food = {
    data: [
        {
            "SNO": 1,
            "ItemName": "cofee Black",
            "Price": "$13.50",
            "Purchased": 44,
            "Sold": 14,
            "InStock": 30,
            "Type": "Drinks",
            "Status": "Available",
            "Image": "image/img1.jpg"
        },
        {
            "SNO": 2,
            "ItemName": "Tea Black",
            "Price": "$11.50",
            "Purchased": 91,
            "Sold": 27,
            "InStock": 64,
            "Type": "Drinks",
            "Status": "Available",
            "Image": "image/img1.jpg"
        }
    ]
};
// 将修正后的对象存入localStorage（仅首次初始化执行）
localStorage.setItem('food', JSON.stringify(food));

2. 修正表格构建逻辑

var cart = JSON.parse(localStorage.getItem('food'));
// 传入cart.data而非整个cart对象
buildTable(cart.data);

function buildTable(data) {
    var table = document.getElementById('myTable');
    // 先拼接所有行的HTML字符串，减少DOM操作次数
    let rowsHTML = '';
    for (var i = 0; i < data.length; i++) {
        // 给图片添加样式控制，避免布局混乱
        rowsHTML += `<tr>
            <td><img src="${data[i].Image}" style="width: 50px; height: 50px; object-fit: cover;"></td>
        </tr>`;
    }
    // 一次性插入所有行到表格
    table.innerHTML += rowsHTML;
}

关键修改说明 #

• 修正数据源传递：调用buildTable时传入cart.data，确保循环时能正确获取数组长度。
• 移除JSON无效尾逗号：删除每个对象最后一个属性后的逗号，避免JSON.parse解析报错。
• 优化DOM操作：先拼接所有行的HTML字符串再一次性插入，减少DOM重绘次数，提升性能。
• 图片样式控制：给图片设置固定宽高和object-fit属性，保证表格布局整齐，符合POS账单页的视觉需求。

额外检查点 #

• 确认image/img1.jpg的相对路径正确，图片文件存在于对应目录下，否则会出现加载失败的占位符。
• 若需要替换表格原有内容而非追加，将table.innerHTML += rowsHTML改为table.innerHTML = rowsHTML即可。

内容的提问来源于stack exchange，提问作者Mohammed Ajmal