jQuery - 如何过滤表行

时间:2012-07-10 07:35:51

标签: 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))没有,它也无效。有什么建议吗?

3 个答案:

答案 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();

});