如何用jQuery隐藏空的html表格单元格?
我必须与之合作:
一个html表5X7。 在许多查询中,填充整个表的项目少于35个。
在这种情况下,如何使用jQuery(或任何其他有效方式)动态“隐藏”空单元格?
谢谢。
编辑 – 改进版本
// 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').each(function(){ if ($(this).html() == '') { $(this).hide(); } });
$('td:empty').hide();
我投票支持Ballsacian的回答。 由于某些原因,
$('table#myTable tr:not(:has(td:not(:empty)))').hide();
有一个错误。 如果你删除最外面的:not(),它会做你所期望的,但是完整的表达式会崩溃jQuery。 🙂
CSS 空单元怎么样
table { empty-cells: hide; }