在线水果摊Add To Cart按钮失效求助：购物车表格无法更新

核心问题分析 #

1. DOM选择错误：原代码中document.querySelector('.shopping-cart')选中的是<table>元素，但insertRow()方法应作用于<tbody>，直接操作table会导致行插入异常。
2. 列数不匹配：原函数仅创建2个单元格，而购物车表格有6列，结构不匹配导致内容无法正确渲染。
3. 缺失必要元素：未添加图片、数量控件、删除按钮和小计，无法和现有硬编码行保持一致。

修正后的shopping.js代码 #

/* ADD CELL AFTER PRESSING ADD TO CART */
function addToCart(productName, productPrice) {
    // 正确获取购物车表格的tbody元素
    var cartTableBody = document.querySelector('.shopping-cart tbody');
    if (!cartTableBody) return;

    // 创建新行
    var newRow = cartTableBody.insertRow();

    // 1. 创建删除按钮列
    var deleteCell = newRow.insertCell(0);
    deleteCell.className = 'cross-symbol';
    deleteCell.innerHTML = '<div class="circle" onclick="deleteRow(this)">&times;</div>';

    // 2. 创建商品图片列
    var imageCell = newRow.insertCell(1);
    imageCell.className = 'image-cell';
    // 若支持多商品，可将图片路径作为参数传入
    imageCell.innerHTML = '<img src="Images/watermelon.jpg" alt="' + productName + '">';

    // 3. 创建商品名称列
    var nameCell = newRow.insertCell(2);
    nameCell.textContent = productName;

    // 4. 创建商品价格列
    var priceCell = newRow.insertCell(3);
    priceCell.textContent = '$' + productPrice.toFixed(2);

    // 5. 创建数量控件列
    var quantityCell = newRow.insertCell(4);
    quantityCell.innerHTML = `
        <div class="quantity">
            <button class="minus" onclick="updateQuantity(this, -1)">-</button>
            <input type="text" class="number" value="1" min="1" readonly>
            <button class="plus" onclick="updateQuantity(this, 1)">+</button>
        </div>
    `;

    // 6. 创建小计列
    var subtotalCell = newRow.insertCell(5);
    subtotalCell.textContent = '$' + productPrice.toFixed(2);
    subtotalCell.className = 'subtotal';

    // 数量更新逻辑
    function updateQuantity(btn, change) {
        var input = btn.parentElement.querySelector('.number');
        var currentQty = parseInt(input.value);
        var newQty = Math.max(1, currentQty + change);
        input.value = newQty;

        // 更新小计
        var price = parseFloat(productPrice);
        subtotalCell.textContent = '$' + (price * newQty).toFixed(2);
    }
}

// 保留原删除行函数
function deleteRow(el) {
    el.closest('tr').remove();
}

额外说明 #

1. 若要支持多商品，可将图片路径作为第三个参数传入addToCart函数，修改imageCell的src属性即可。
2. 数量更新采用内联绑定是为了快速适配现有结构，若项目规模较大，建议改用事件委托提升性能。
3. 确保shopping.js文件在HTML页面中正确引入（放在</body>前或使用defer属性），避免函数未定义问题。

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