如何使用jQuery实现表格中数量增减并获取对应值？

嘿，我看你在表格里的商品数量增减和值获取上卡壳了，咱们一步步拆解问题，把它搞定～

首先，你当前代码里的一个核心问题是重复使用了相同的ID：HTML规范里ID必须是页面唯一的，如果表格每行的数量输入框都用txtAcrescimo作为ID，那$(obj).closest('tr').find('#txtAcrescimo')只会找到页面中第一个匹配的输入框，这就是你拿不到正确数量的关键原因。

接下来给你一套完整的解决方案：

1. 修正HTML结构（用Class代替ID） #

把每行的数量输入框的ID改成Class，确保选择器能正确定位到当前行的输入框：

<table>
  <tr>
    <td>商品A</td>
    <td>
      <button class="btn-qty-decrease">-</button>
      <input type="number" class="txt-acrescimo" value="1" min="1">
      <button class="btn-qty-increase">+</button>
    </td>
    <td><button onclick="addToCart(123, this)">加入购物车</button></td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>
      <button class="btn-qty-decrease">-</button>
      <input type="number" class="txt-acrescimo" value="1" min="1">
      <button class="btn-qty-increase">+</button>
    </td>
    <td><button onclick="addToCart(456, this)">加入购物车</button></td>
  </tr>
</table>

2. 实现数量增减的逻辑 #

通过jQuery给增减按钮绑定点击事件，修改对应输入框的数值：

// 数量增加按钮逻辑
$('.btn-qty-increase').click(function() {
  // 找到当前按钮所在单元格里的数量输入框
  const qtyInput = $(this).closest('td').find('.txt-acrescimo');
  let currentQty = parseInt(qtyInput.val());
  // 数值加1并更新输入框
  qtyInput.val(currentQty + 1);
});

// 数量减少按钮逻辑
$('.btn-qty-decrease').click(function() {
  const qtyInput = $(this).closest('td').find('.txt-acrescimo');
  let currentQty = parseInt(qtyInput.val());
  // 确保数量不小于最小值（这里设为1，你可以根据需求调整）
  if (currentQty > 1) {
    qtyInput.val(currentQty - 1);
  }
});

3. 修正addToCart函数获取正确数量 #

修改函数里的选择器，用Class定位输入框，确保拿到当前行的数量值：

function addToCart(product_id, obj) {
  // 定位到当前商品行的数量输入框
  const qty = $(obj).closest('tr').find('.txt-acrescimo').val();
  
  // 可选：添加数值验证，避免无效值
  if (!isNaN(qty) && qty >= 1) {
    console.log(`商品ID: ${product_id}, 选中数量: ${qty}`);
    // 这里可以写你的加入购物车逻辑，比如发起AJAX请求等
  } else {
    console.log('请输入有效的商品数量');
  }
}

关键知识点总结 #

• 永远不要在页面中重复使用相同的ID，用Class来标记同一类元素
• 用closest()方法向上查找父元素，能精准定位到当前行/单元格的目标元素
• 修改数值时记得用parseInt()把输入框的字符串值转成数字，避免出现字符串拼接的错误

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