JS实现库存缺货筛选时forEach循环仅读取首行商品数据问题

场景说明 #

我是开发新手，目前正在搭建库存管理应用，后端使用MongoDB存储商品数据，每条商品记录包含两个核心字段：

• 当前库存数量 quantity
• 最低库存阈值 MinQuantity

需要实现分类值为"Missing"时的筛选逻辑：仅在前端表格中展示实际库存低于最低库存阈值的缺货商品。
当前代码运行存在异常：使用forEach遍历tbody下所有tr行时，循环始终停留在第一个商品，不会继续处理后续行数据，添加alert弹窗调试也未定位问题。

异常代码 #

if (category == "Missing") {
  document.querySelectorAll("tbody tr").forEach((element) => {
    alert(Number(document.getElementById("prodMinQuantity").innerText));
    alert(Number(document.getElementById("prodQuantity").innerText));
    if (
      Number(document.getElementById("prodMinQuantity").innerText) >
      Number(document.getElementById("prodQuantity").innerText)
    ) {
      alert("fgfgfg");
      element.style.display = "none";
    }
  });
}

问题根因 #

• 违反HTML id唯一性规则：你在每一行的商品元素上都用了相同的id（prodMinQuantity、prodQuantity），id属性在整个页面中只能对应唯一元素，所以循环里每次调用document.getElementById()，拿到的永远是页面中第一个匹配的元素（也就是第一行商品的节点），根本读不到后续行的库存数据。
• 筛选逻辑写反：需求是展示库存低于阈值的缺货商品，现有逻辑判断阈值大于库存（也就是缺货状态）时，反而把对应行设置为隐藏，和需求完全相反。
• 缺少状态重置：切换筛选条件时没有先重置所有行的显示状态，会残留之前筛选的隐藏/显示结果，导致展示混乱。

修复方案 #

1. 先修改HTML结构，把每行重复的id属性改成class属性，避免id重复的规范问题，比如把id="prodQuantity"改成class="prod-quantity"，id="prodMinQuantity"改成class="prod-min-quantity"。
2. 遍历行时，把库存值的查询范围限定在当前行内部，不要做全局查询。
3. 修正显示/隐藏逻辑，缺货商品显示，非缺货商品隐藏。

修复后的可运行代码：

if (category == "Missing") {
  document.querySelectorAll("tbody tr").forEach((row) => {
    // 仅在当前行范围内查找库存节点，确保拿到的是当前行的数据
    const currentStock = Number(row.querySelector(".prod-quantity").innerText.trim());
    const minStockThreshold = Number(row.querySelector(".prod-min-quantity").innerText.trim());
    
    // 库存低于阈值=缺货，显示；否则隐藏
    if (currentStock < minStockThreshold) {
      row.style.display = "";
    } else {
      row.style.display = "none";
    }
  });
}

调试建议：排查前端逻辑问题不需要靠alert弹窗，直接打开浏览器开发者工具的Sources面板给代码打断点，或者在Console面板打印变量值，调试效率会高很多。

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