JavaScript隐藏td函数仅对HTML表格首行生效，为何无法作用其他行？

问题根源 #

HTML规范明确要求ID是页面内唯一的标识符，同一个页面不能有多个元素共用同一个ID。你在PHP循环里给每一行的<td>都加了id="private-mode"，这已经违反了ID唯一性规则。而document.getElementById()方法只会返回页面中第一个匹配该ID的元素，所以你的函数只能操作表格第一行的对应td，其余行的元素根本不会被选中。

修复方案 #

1. 替换ID为Class：把所有<td>的id="private-mode"改成class="private-mode"，Class是用来标记一组具有相同特性的元素，支持重复使用。
2. 修改JavaScript逻辑：使用document.querySelectorAll()获取所有带该Class的元素，然后遍历处理每个元素的显示状态。另外注意<td>的默认显示属性是table-cell，用block会破坏表格布局，恢复显示时应该用table-cell。

修改后的代码

• HTML表格中td部分：

<td class="private-mode"><?php echo $rows['Bedrag'];?></td>

• JavaScript函数：

function privatemode() {
  const elements = document.querySelectorAll(".private-mode");
  elements.forEach(el => {
    el.style.display = el.style.display === "none" ? "table-cell" : "none";
  });
}

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