[英]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或为空,则隐藏此表的一行。
这就是我到目前为止所得到的:
$(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已完成”列?
谢谢你的帮助。
假设您的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:
<tr data-erledigt=0>....
.....
<tr data-erledigt=1>
您可以编写一个简单的jQuery:
$("tr[data-erledigt='0']").hide();
$('#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();
我可能会这样做:
$(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()
,所有元素都会显示出来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.