如何用CSS/JS隐藏包含指定文本的表格行？

一、CSS方案（局限性大，不推荐） #

CSS标准中没有原生的文本内容匹配选择器，曾经的:contains()选择器仅在旧版浏览器或特定兼容模式下可用，现代主流浏览器已不再支持该选择器，因此用CSS实现此需求的可靠性极低，不建议采用。

二、JavaScript方案（可靠且灵活） #

原生JavaScript实现 #

通过遍历表格数据行，检查首单元格的文本内容，匹配后执行隐藏或移除操作：

// 定位目标表格（示例用id定位，可根据实际改为类名或其他选择器）
const targetTable = document.getElementById('target-table');
// 获取所有数据行（排除表头行）
const dataRows = targetTable.querySelectorAll('tr:not(:first-child)');

dataRows.forEach(row => {
  const firstCell = row.querySelector('td:first-child');
  // 匹配指定文本（trim处理避免空格干扰）
  if (firstCell && firstCell.textContent.trim() === 'Name: 123') {
    // 方案1：隐藏该行（保留DOM结构）
    row.style.display = 'none';
    // 方案2：直接移除该行（从DOM中彻底删除）
    // row.remove();
  }
});

如果表格无id，可通过页面结构定位，比如取页面第一个表格：

const table = document.querySelector('table');
const dataRows = table.querySelectorAll('tr:not(:first-child)');
// 后续遍历逻辑同上

jQuery实现（若项目已引入jQuery） #

如果项目中已使用jQuery，可通过更简洁的代码实现：

// 隐藏首单元格文本为"Name: 123"的行
$('table tr').has('td:first-child:contains("Name: 123")').hide();
// 如需直接移除，替换为：
// $('table tr').has('td:first-child:contains("Name: 123")').remove();

若需要忽略大小写匹配，可自定义筛选逻辑：

$('table tr').filter(function() {
  return $(this).find('td:first-child').text().trim().toLowerCase() === 'name: 123'.toLowerCase();
}).hide();

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