如何根据其中一列中的值隐藏表行

我有一张如下表。

 
 
ID
 
Titel
 
Beschreibung
 
Gemeldet von
 
Erstellt am
 
Geändert am
 
Erledigt
 
 
 
11
 
Termine verschieben
 
 
 
2012-07-26 14:34:36
 
2012-07-30 08:37:40
 
1
 
löschen
 
  

如果列erledigt（已完成）为0或为空，我想要隐藏此表的一行。

这就是我到目前为止所得到的：

 $(document).ready(function() { $('#cbHideCompleted').click(function() { if($(this).prop('checked')) { $('#subtask_table td').each(function() { //if td is 'completed' column //if value is 0 or null //hide }); } else { $('#subtask_table td').each(function() { $(this).show(); }); } }); }); 

有没有办法直接使用jquery选择器访问元素。 如果没有，我该如何实施“//如果td是’已完成’列”？

谢谢你的帮助。

Answer 1

假设你的erledigt列总是第二列，那么它应该非常直接。

遍历行而不是单元格，找到每行中的第二个最后一个单元格，并根据需要显示/隐藏行。

 $('#subtask_table tr').each(function() { var $erledigtCell = $(this).find("td").last().prev(); var $row = $erledigtCell.parent(); if($erledigtCell.text() == '1'){ $row.hide(); } else { $row.show(); } }); 

如果您对网格的生成方式有任何影响，那么如果您可以向tr添加自定义属性会更好，例如data-erledigt=... 比没有遍历要做，并且显示哪个列erledigt无关紧要。

用这样的Html：

 .... .....  

你可以写一个简单的jQuery：

 $("tr[data-erledigt='0']").hide(); 

Answer 2

 $('#subtask_table tr td:eq(6)').each(function() { // eq(6) selects the 7-th td, which is the "completed" column if(this.innerHTML === '0' || this.innerHTML === '') { $(this).parent().hide(); // td.parent returns the tr } }); 

此外，这是多余的（虽然我不确定这是什么，也许你想显示行（tr而不是td））：

 $('#subtask_table td').each(function() { $(this).show(); }); 

只需使用：

 $('#subtask_table td').show(); 

Answer 3

我可能会这样做：

 $(document).ready(function() { $('#cbHideCompleted').click(function() { if($(this).prop('checked')) { $('#subtask_table td:nth-child(7)').each(function() { //if td is 'completed' column var val = $(this).text(); if (val === "" || val === "0") $(this).parent().hide(); }); } else { $('#subtask_table tr').show(); } }); }); 

:nth-child()选择器 “选择所有父元素的第n个子元素”，因此$('#subtask_table td:nth-child(7)')选择第7列中的所有td元素。 因此循环遍历这些单元格，如果文本内容是空字符串或“0”隐藏其父tr元素。

在你的else分支中，你不需要.each()循环：你可以直接在包含多个元素的jQuery对象上调用.show() ，并显示所有元素。