JavaScript表格数据过滤实践：解决DOM元素选择与ID重复问题

if (category == "Missing") {
  document.querySelectorAll("tbody tr").forEach((element) => {
    // 错误：prodMinQuantity 和 prodQuantity 的ID在整个文档中可能不唯一
    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";
    }
  });
}

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

    // 检查元素是否存在，以避免空指针错误
    if (!prodMinQuantityElement || !prodQuantityElement) {
        console.warn("当前行缺少必要的数量元素:", element);
        return; // 跳过当前行
    }

    // 将文本内容转换为数字，使用 ~~ 是一个简洁的位运算符转换方式
    const prodMinQuantity = ~~prodMinQuantityElement.innerText;
    const prodQuantity = ~~prodQuantityElement.innerText;

    // 调试用途，实际应用中可移除
    // alert(`Min: ${prodMinQuantity}, Qty: ${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-product-id="1" data-min-quantity="10" data-current-quantity="5">
      <td>产品A</td>
      <td>10</td>
      <td>5</td>
    </tr>
    <tr data-product-id="2" data-min-quantity="20" data-current-quantity="25">
      <td>产品B</td>
      <td>20</td>
      <td>25</td>
    </tr>
    <tr data-product-id="3" data-min-quantity="15" data-current-quantity="12">
      <td>产品C</td>
      <td>15</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

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

    // 检查数据是否有效
    if (isNaN(prodMinQuantity) || isNaN(prodQuantity)) {
        console.warn("当前行缺少或包含无效的数量数据:", element);
        return;
    }

    if (prodMinQuantity > prodQuantity) {
      element.style.display = "none";
    } else {
      element.style.display = "";
    }
  });
}