我需要通过点击链接过滤某个表格行。
function filterRows(statusName) {
$("#mainTable > tbody > tr").find(statusName).each( function () {
alert($(this));
//the alert is not shown
});
}
<a class="rejected" href="#" onclick="filterRows('rejected');">rejected</a>
<a class="new" href="#" onclick="filterRows('new');">new</a>
<table id="mainTable">
<thead>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
</thead>
<tbody class="Content">
<tr class="rejected">
<td>data1</td>
<td>data12</td>
</tr>
<tr>
<td>data13</td>
<td>data15</td>
</tr>
<tr class="new">
<td>data16</td>
<td>data18</td>
</tr>
</tbody>
但即使alert($(this))
没有,它也无效。有什么建议吗?
答案 0 :(得分:2)
我按如下方式修改了选择器:
function filterRows(statusName) {
$("#mainTable tbody tr."+statusName).each( function () {
console.log(this);
$(this).hide();
});
}
可以进一步简化为:
function filterRows(statusName) {
$("#mainTable tbody tr."+statusName).hide();
}
实施过滤器
但是,如果您尝试基于存储为类的数据实现jQuery过滤器,则可以执行以下操作:
function filterRows(statusName) {
$("#mainTable tbody tr."+statusName).show();
$("#mainTable tbody tr").not("."+statusName).hide();
}
这将显示与'statusName'匹配的行,但同样重要的是它将隐藏不匹配的行。请记住添加清除过滤器的功能!
答案 1 :(得分:0)
Guy David是正确的 - 将您的HTML更改为:
<table id="mainTable">
<thead>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
</thead>
<tbody>
<tr class="rejected">
<td>data1</td>
<td>data12</td>
</tr>
<tr>
<td>data13</td>
<td>data15</td>
</tr>
<tr class="new">
<td>data16</td>
<td>data18</td>
</tr>
</tbody>
...
答案 2 :(得分:0)
或:
$('a').click(function(e){
$('.'+e.target.className).not('a').hide();
});