如何使用JS实现HTML表格行按对应ID元素内容有无动态显隐

实现方案 #

核心逻辑是在给p标签赋值后，判断内容有效性，再控制其父级tr行的显示状态。

1. 封装通用调用函数（推荐） #

把赋值、判断、显隐控制逻辑合并成公共函数，避免重复写代码：

function setScore(pId, result) {
  const pTag = document.getElementById(pId);
  // 赋值内容
  pTag.innerHTML = result;
  // 找到p标签所在的整行tr
  const scoreRow = pTag.closest('tr');
  // 自定义有效内容判断规则：这里默认去掉首尾空格后不为空即为有效
  const isValid = pTag.textContent.trim() !== '';
  // 控制行显隐
  scoreRow.style.display = isValid ? 'table-row' : 'none';
}

2. 使用方法 #

替换你原来的赋值写法即可：

• 要给数学科目赋值95分：调用setScore('maths', 95)，数学行会自动展示
• 要给科学科目赋值空：调用setScore('science', '')，科学行会自动隐藏

兼容处理（可选） #

如果需要兼容不支持closest方法的旧浏览器，把获取tr的代码替换为向上查找父级即可：

const scoreRow = pTag.parentNode.parentNode;

初始状态处理（可选） #

如果需要页面刚加载时就隐藏所有空内容的分数行，添加以下代码：

window.addEventListener('DOMContentLoaded', () => {
  // 把你所有分数p标签的id放到这个数组里
  const allScoreIds = ['maths', 'science'];
  allScoreIds.forEach(id => {
    const pTag = document.getElementById(id);
    pTag.closest('tr').style.display = pTag.textContent.trim() ? 'table-row' : 'none';
  })
})

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