点击按钮实现表格中单个商品数量递增的HTML/JS技术问题

要实现点击每行的Add按钮时，让该行的商品数量值递增的需求，你需要调整JavaScript代码，让按钮能精准定位到自己所在行的数量单元格，再完成数值更新。下面是具体的修改方案：

现有代码的问题分析 #

• document.getElementsByClassName('mystore-quantity')返回的是所有数量单元格的集合，但你没有将按钮与对应行的数量单元格关联，无法精准更新目标数值
• 代码仅调用了updateStock，缺少前端页面上的数量递增逻辑

修改后的JavaScript代码 #

我保留了你原有的updateStock调用逻辑，同时新增了前端数量更新的处理：

const actionBtns = document.getElementsByClassName('action-btn');

for (let i = 0; i < actionBtns.length; i++) {
    actionBtns[i].addEventListener('click', function(){
        const productId = this.dataset.product;
        const action = this.dataset.action;
        console.log('productId:', productId, 'Action:', action );

        if(user == 'AnonymousUser'){
            console.log('User not logged in');
        } else {
            // 仅处理Add按钮的数量递增逻辑
            if(action === 'add'){
                // 获取当前按钮所在的表格行
                const currentRow = this.closest('tr');
                // 在当前行内定位数量单元格
                const quantityElement = currentRow.querySelector('.mystore-quantity');
                // 将文本内容转为整数，避免字符串拼接问题
                let currentQuantity = parseInt(quantityElement.textContent);
                // 递增数量
                currentQuantity += 1;
                // 更新单元格显示的数值
                quantityElement.textContent = currentQuantity;
            }
            
            updateStock(productId, action);
        }
    });
}

关键逻辑说明 #

• this.closest('tr')：通过当前点击的按钮向上查找最近的<tr>元素，精准锁定按钮所在的商品行，避免影响其他行的数值
• 行内查询querySelector('.mystore-quantity')：只在当前商品行内查找数量单元格，确保操作的是对应商品的数值
• 转整数后递增：把单元格的文本内容转为整数再进行加法操作，防止出现"5"变成"51"这类字符串拼接的错误

修改完成后，点击某一行的Add按钮，该行的商品数量会立即在前端显示+1，同时保留你原有的updateStock调用，同步后端的库存数据。

内容的提问来源于stack exchange，提问作者Ali Ziya ÇEVİK