JavaScript动态表格数据过滤：避免id重复与正确DOM操作指南

if (category == "Missing") {
  document.querySelectorAll("tbody tr").forEach((element) => {
    // 错误：prodMinQuantity 和 prodQuantity 的ID在多行中重复
    // document.getElementById("prodMinQuantity") 总是返回文档中第一个匹配的元素
    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";
    }
  });
}

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>当前库存</th>
      <th>最小库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品A</td>
      <td id="prodQuantity">10</td>
      <td id="prodMinQuantity">5</td>
    </tr>
    <tr>
      <td>产品B</td>
      <td id="prodQuantity">3</td>
      <td id="prodMinQuantity">10</td>
    </tr>
    <!-- 更多行，ID重复，这是不规范的，但querySelector仍能工作 -->
  </tbody>
</table>

if (category === "Missing") {
  document.querySelectorAll("tbody tr").forEach((element) => {
    // 使用 element.querySelector() 在当前行内部查找元素
    const prodMinQuantityElement = element.querySelector("#prodMinQuantity");
    const prodQuantityElement = element.querySelector("#prodQuantity");

    // 检查元素是否存在，并提取其文本内容
    const prodMinQuantity = prodMinQuantityElement ? Number(prodMinQuantityElement.innerText) : 0;
    const prodQuantity = prodQuantityElement ? Number(prodQuantityElement.innerText) : 0;

    // 调试用，实际应用中应移除
    // alert(`当前行 - 最小库存: ${prodMinQuantity}, 当前库存: ${prodQuantity}`);

    if (prodMinQuantity > prodQuantity) {
      // alert("需要补货"); // 调试用
      element.style.display = "none"; // 隐藏需要补货的行
    } else {
      element.style.display = ""; // 显示不需要补货的行（如果之前被隐藏）
    }
  });
}

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>当前库存</th>
      <th>最小库存</th>
    </tr>
  </thead>
  <tbody>
    <tr data-min-quantity="5" data-quantity="10">
      <td>产品A</td>
      <td>10</td>
      <td>5</td>
    </tr>
    <tr data-min-quantity="10" data-quantity="3">
      <td>产品B</td>
      <td>3</td>
      <td>10</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

if (category === "Missing") {
  document.querySelectorAll("tbody tr").forEach((element) => {
    // 从 data-* 属性中获取数据
    const prodMinQuantity = Number(element.dataset.minQuantity);
    const prodQuantity = Number(element.dataset.quantity);

    // 调试用，实际应用中应移除
    // alert(`当前行 - 最小库存: ${prodMinQuantity}, 当前库存: ${prodQuantity}`);

    if (prodMinQuantity > prodQuantity) {
      element.style.display = "none"; // 隐藏需要补货的行
    } else {
      element.style.display = ""; // 显示不需要补货的行
    }
  });
}