jQuery - 如何过滤表格行

Question

我需要通过单击链接来过滤某个表格行。

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))工作没有。有什么建议么？

Answer 1

我修改了选择如下：

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'匹配，但同样重要的是它会隐藏不匹配的行。请记住添加功能来清除过滤器！

Answer 2

盖伊大卫是正确的 - 改变你的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> 
... 

Answer 3

或：

$('a').click(function(e){ 

    $('.'+e.target.className).not('a').hide(); 

});