如何使用 jQuery 隐藏空的 html 表格单元格？

Posted 2023-03-05

【中文标题】如何使用 jQuery 隐藏空的 html 表格单元格？

【英文标题】：How can I hide empty html table cells with jQuery?

【发布时间】：2011-02-07 14:07:29

【问题描述】：

我有一个 5×7 的 html 表格。在许多查询中，填写完整表格的项目少于 35 个。

在这种情况下，如何使用 jQuery（或任何其他有效方式）动态“隐藏”空单元格？

【问题讨论】：

您是在谈论隐藏整行或整列空单元格吗？还是其他模式？

【参考方案1】：

编辑 - 改进版

// Grab every row in your table
$('table#yourTable tr').each(function()
  if($(this).children('td:empty').length === $(this).children('td').length)
    $(this).remove(); // or $(this).hide();
  
);

未经测试，但逻辑上似乎合理。

// Grab every row in your table
$('table#yourTable tr').each(function()
  var isEmpty = true;
  // Process every column
  $(this).children('td').each(function()
    // If data is present inside of a given column let the row know
    if($.trim($(this).html()) !== '') 
      isEmpty = false;
      // We stop after proving that at least one column in a row has data
      return false;
    
  );
  // If the whole row is empty remove it from the dom
  if(isEmpty) $(this).remove();
);

【讨论】：

这仅适用于特定列的所有 TD 单元格为空白的情况。否则，如果您删除第一个单元格，其余单元格的内容将分别向左移动一个（显示错误）。如果一整列的 TD 单元格都是空白的，则删除该列。

是否值得在 each 函数内分配 $this = $(this); 而不是每行转换为 jQuery 对象三次？

【参考方案2】：

显然，您需要调整选择器以满足您的特定需求：

$('td').each(function()
  if ($(this).html() == '') 
    $(this).hide();
  
);

【讨论】：

我遇到过 $('td:empty').hide();在 Safari 中不起作用，所以我不使用它。我想知道它在较新版本的 jquery 中是否更可靠。

【参考方案3】：

$('td:empty').hide();

【参考方案4】：

CSS empty-cells 怎么样

table 
    empty-cells: hide;

【参考方案5】：

我投票给Ballsacian's answer。不知为何，

$('table#myTable tr:not(:has(td:not(:empty)))').hide();

有一个错误。如果你删除最外层的:not()，它会如你所愿，但上面的完整表达式会使 jQuery 崩溃。