如何用jQuery隐藏空的html表单元格？ [英] How can I hide empty html table cells with jQuery?

问题描述

我必须使用什么：

html表5X7。在许多查询中，填充完整表格的项目少于35个。

What I have to work with:
An html table 5X7. On many queries, there are less that 35 items filling the complete table.

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

How can I "hide" the empty cells dynamically in this case, using jQuery (or any other efficient way)?

谢谢。

推荐答案

编辑 - 改进版 b

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

未经测试，但似乎逻辑良好。

Not tested but seems logically sound.

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

这篇关于如何用jQuery隐藏空的html表单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！