如何根据表中某一列的值隐藏表行 [英] How to hide a table row depending on a value in one of its column
问题描述
我有一个如下表.
<table id="subtask_table" style="width: 80%">
<tr>
<th>ID</th>
<th>Titel</th>
<th>Beschreibung</th>
<th>Gemeldet von</th>
<th>Erstellt am</th>
<th>Geändert am</th>
<th>Erledigt</th>
</tr>
<tr>
<td>11</td>
<td><a href="/taskExplorer/subtasks/edit/11">Termine verschieben</a></td>
<td></td>
<td></td>
<td>2012-07-26 14:34:36</td>
<td>2012-07-30 08:37:40</td>
<td>1</td>
<td><a href="/taskExplorer/subtasks/delete/11">löschen</a></td>
</tr>
</table>
如果erledigt列(已完成)为0或为空,我想隐藏此表的一行.
What I want to do is hide a row of this table, if the column erledigt (completed) is 0 or empty.
这就是我到目前为止所得到的:
That's what I got this far:
$(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已完成"列?
Is there a way to access the elements directly with a jquery selector. If not, how do I implement "//if td is 'completed' column"?
感谢您的帮助.
推荐答案
假设您的erledigt
列始终是倒数第二个列,那么它应该非常简单.
Assuming your erledigt
column is always the second last column then it should be very straight forward.
遍历行而不是单元格,并找到每一行的倒数第二个单元格,并根据需要显示/隐藏行.
Iterate through the rows and not the cells and find the second last cell in each row and show/hide the row as required.
$('#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的哪一列都没有关系.
If you have any influence on how the grid is generated it would be much better if you can add a custom attribute to the tr
, for example data-erledigt=...
. Than you have no traversing to do and it doesn't matter which column erledigt is displayed in.
使用这样的HTML:
<tr data-erledigt=0>....
.....
<tr data-erledigt=1>
您可以编写一个简单的jQuery:
You could write a jQuery as simple as:
$("tr[data-erledigt='0']").hide();
这篇关于如何根据表中某一列的值隐藏表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!