[英]How can I hide empty html table cells with jQuery?
What I have to work with:我必须处理的事情:
An html table 5X7.一个 5X7 的 html 表格。 On many queries, there are less that 35 items filling the complete table.在许多查询中,填充完整表的项目少于 35 个。
How can I "hide" the empty cells dynamically in this case, using jQuery (or any other efficient way)?在这种情况下,如何使用 jQuery(或任何其他有效方式)动态“隐藏”空单元格?
Thank you.谢谢你。
Edit - Improved Version编辑 - 改进版本
// 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();
});
Obviously you'll want to adjust the selector to fit your specific needs:显然,您需要调整选择器以满足您的特定需求:
$('td').each(function(){
if ($(this).html() == '') {
$(this).hide();
}
});
$('td:empty').hide();
How about CSS empty-cells CSS空单元格怎么样
table {
empty-cells: hide;
}
I'm voting for Ballsacian's answer .我投票支持Ballsacian 的回答。 For some reason,因为某些原因,
$('table#myTable tr:not(:has(td:not(:empty)))').hide();
has a bug.有一个错误。 If you remove the outermost :not()
, it does what you'd expect, but the full expression above crashes jQuery.如果删除最外面的:not()
,它会执行您期望的操作,但是上面的完整表达式会使 jQuery 崩溃。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.