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

Question

我必须处理的事情：
一个 5X7 的 html 表格。 在许多查询中，填充完整表的项目少于 35 个。

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

谢谢你。

Answer 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();
});

Answer 2

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

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

Answer 3

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

Answer 4

CSS空单元格怎么样

table {
    empty-cells: hide;
}

Answer 5

我投票支持Ballsacian 的回答。 因为某些原因，

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

有一个错误。 如果删除最外面的:not() ，它会执行您期望的操作，但是上面的完整表达式会使 jQuery 崩溃。