jQuery - 如何过滤表格行

问题描述：

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

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

选择器中的'>'字符表示该表必须包含孩子的'tbody'，没有任何递归操作。我没有看到任何。 – Novak 2012-07-10 07:38:27

tbody在哪里？ – F0G 2012-07-10 07:38:32

试试这个选择器'$（“。”+ statusName）.each' – 2012-07-10 07:39:26

答

我修改了选择如下：

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

你的代码正在工作。但我很抱歉，我差点忘了。我必须过滤没有特定statusName的行。 – Alexandre 2012-07-10 08:39:13

答

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

答

或：

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

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

});

jQuery - 如何过滤表格行

相关推荐