如何用JavaScript查找并隐藏/移除带card-table类的空表格？

原生 JavaScript 实现 #

如果不想依赖jQuery，用原生JS就能完成需求。需要分两种场景处理：页面初始加载的表格，以及动态异步生成的表格：

// 定义处理空表格的核心函数
function handleEmptyTables() {
  document.querySelectorAll('.card-table').forEach(table => {
    // 确认表格有表头但无数据单元格
    const hasHeaders = table.querySelector('th') !== null;
    const hasDataCells = table.querySelector('td') !== null;
    
    if (hasHeaders && !hasDataCells) {
      table.style.display = 'none'; // 隐藏表格，要直接移除就换成 table.remove()
    }
  });
}

// 页面DOM加载完成后，先处理已存在的表格
document.addEventListener('DOMContentLoaded', handleEmptyTables);

// 针对动态生成的表格（比如AJAX加载、前端渲染），用MutationObserver监听DOM变化
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // 检查新增节点是否是目标表格
      if (node.nodeType === 1 && node.classList.contains('card-table')) {
        const hasHeaders = node.querySelector('th') !== null;
        const hasDataCells = node.querySelector('td') !== null;
        if (hasHeaders && !hasDataCells) {
          node.style.display = 'none';
        }
      }
    });
  });
});

// 监听整个文档的DOM变化，也可以指定表格的父容器，提升性能
observer.observe(document.body, { childList: true, subtree: true });

jQuery 实现 #

如果项目已经引入jQuery，代码会更简洁直观：

// 处理页面初始加载的表格
$(document).ready(function() {
  $('.card-table').each(function() {
    const $table = $(this);
    // 判断是否有表头但无数据行
    if ($table.find('th').length > 0 && $table.find('td').length === 0) {
      $table.hide(); // 隐藏表格，移除用 $table.remove()
    }
  });
});

// 针对AJAX动态生成的表格，监听所有AJAX请求完成后再检查
$(document).ajaxComplete(function() {
  $('.card-table').each(function() {
    const $table = $(this);
    if ($table.find('th').length > 0 && $table.find('td').length === 0) {
      $table.hide();
    }
  });
});

关键注意事项 #

• 避免误处理：判断时必须同时满足「存在<th>」和「不存在<td>」，防止把连表头都没有的空表格也处理掉
• 隐藏 vs 移除：hide()/style.display='none'仅隐藏表格，DOM结构保留；remove()会彻底从DOM中删除，根据实际需求选择
• 动态表格适配：如果表格是异步生成的，必须在表格渲染完成后执行检查逻辑，要么用MutationObserver监听DOM变化，要么在AJAX回调/渲染回调中触发处理函数

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