SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Simple Javascript or Jquery Table filter?

  1. May 10, 2013 03:12 #1
    jaagare
    jaagare is offline
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    150
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Simple Javascript or Jquery Table filter?

    I have looked at various table filters but most need modifications to the basic table I generate. Modifying that is difficult, so is there some kind of simple table filter.

    Here is what I would need.

    I need to have a drop down with select : 1,2,3,4,5,6,7,8,9

    now I already generate a table in this format

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr id="5">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="6">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="9">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="5">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="3">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="2">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="7">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="5">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="8">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="2">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
    If you see above table I already pass id for each tr id="X"

    What I need the Javascript / Jquery code to do is on selecting value from dropdown above only those rows show up with that row id thus filtering entire row.

    Is such a thing possible?

    Thanks in advance for all the help.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...
    Reply With Quote Reply With Quote
  2. May 10, 2013 04:35 #2
    Pullo
    Pullo is online now
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,370
    Mentioned
    38 Post(s)
    Tagged
    1 Thread(s)
    Hi there,

    First off some observations:

    You have multiple <tr> elements with the same id attribute.
    This is not good.
    Ids need to be unique to a page.
    In this case it is better to use a class name.

    Neither ids or class names can start with a number (AFAIK).

    So, that said it would be easy to make this kind of filter for the HTML you posted.

    Here's the code:

    Code:
    <!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Table filter</title>
  <style>
    .two{background: red;}
    .three{background: green;}
    .five{background: blue;}
    .six{background: pink;}
    .seven{background: gray;}
    .eight{background: yellow;}
    .nine{background: orange;}
    select{margin:0 0 15px 0}
  </style>
  </head>

  <body>
    <select id="mySelect">
      <option value="zero">Filter table display</option>
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
      <option value="four">Four</option>
      <option value="five">Five</option>
      <option value="six">Six</option>
      <option value="seven">Seven</option>
      <option value="eight">Eight</option>
      <option value="nine">Nine</option>
    </select>

    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr class="five">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="six">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="nine">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="five">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="three">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="two">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="seven">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="five">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="eight">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="two">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $("#mySelect").on("change", function(){
        var opt = $(this).val();
        $("tr").each(function(){
          var tr = $(this);
	  tr.show();
          if (! tr.hasClass(opt)){
            tr.hide();
          }
        });
      });
    </script>
  </body>
</html>
    Here's a demo.

    However, as I remember, you deal with tables which have like one gazillion rows, so depending on what you want to use it for, the JS might well need reworking/optimizing.
    Start a blog, they said. People will read it, they said.
    Reply With Quote Reply With Quote
  3. May 10, 2013 07:15 #3
    jaagare
    jaagare is offline
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    150
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    First off some observations:

    You have multiple <tr> elements with the same id attribute.
    This is not good.
    Ids need to be unique to a page.
    In this case it is better to use a class name.

    Neither ids or class names can start with a number (AFAIK).

    So, that said it would be easy to make this kind of filter for the HTML you posted.

    Here's the code:

    Code:
    <!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Table filter</title>
  <style>
    .two{background: red;}
    .three{background: green;}
    .five{background: blue;}
    .six{background: pink;}
    .seven{background: gray;}
    .eight{background: yellow;}
    .nine{background: orange;}
    select{margin:0 0 15px 0}
  </style>
  </head>

  <body>
    <select id="mySelect">
      <option value="zero">Filter table display</option>
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
      <option value="four">Four</option>
      <option value="five">Five</option>
      <option value="six">Six</option>
      <option value="seven">Seven</option>
      <option value="eight">Eight</option>
      <option value="nine">Nine</option>
    </select>

    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr class="five">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="six">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="nine">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="five">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="three">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="two">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="seven">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="five">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="eight">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
      <tr class="two">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    </table>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $("#mySelect").on("change", function(){
        var opt = $(this).val();
        $("tr").each(function(){
          var tr = $(this);
	  tr.show();
          if (! tr.hasClass(opt)){
            tr.hide();
          }
        });
      });
    </script>
  </body>
</html>
    Here's a demo.
    The demo looks great. Only one issue I found in the demo is that there is no way to show up all the rows once a specific drop down has been selected. I guess there needs to be a first like select all so that you could revert back to the original table without filter.

    However, as I remember, you deal with tables which have like one gazillion rows, so depending on what you want to use it for, the JS might well need reworking/optimizing.
    LOL. Yes its the same table that I discussed earlier. Will see how it works on that.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...
    Reply With Quote Reply With Quote
  4. May 10, 2013 07:48 #4
    Pullo
    Pullo is online now
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,370
    Mentioned
    38 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    I'm away from the PC right now, but I'll update the demo later on to include a "show all" option.

    Do let me know how you get on, as I followed our last thread with interest.
    Start a blog, they said. People will read it, they said.
    Reply With Quote Reply With Quote
  5. May 10, 2013 22:57 #5
    jaagare
    jaagare is offline
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    150
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ok finally applied it on the table and I must say the script is amazingly fast. Could not notice any lag while filtering. Thanks @Pullo for the script.

    2 things that I noticed.
    1. While filtering even the <thead> and <tfoot> <trs> get closed so the header and the footer of the table go missing once filter is applied.
    2. As discussed yesterday, Show All option was missing so I added this to your script

    Code:
    if (opt == "zero"){
            tr.show();
          }
    and changed this

    Code:
    <option value="zero">Filter table display</option>
    in the select drop down to

    Code:
    <option value="zero">Clear Filter - Show All</option>
    Hence only thing that I have issue is the <thead>and <tfoot> related tr's closing.

    Thanks
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...
    Reply With Quote Reply With Quote
  6. May 10, 2013 23:21 #6
    Pullo
    Pullo is online now
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,370
    Mentioned
    38 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Glad it's working
    The final thing shouldn't be too hard to work out.
    But just so we're on the same page, could you post what we currently have in the way of JavaScript and could you also update the sample HTML table to include the aforementioned <thead> and <tfoot> elements.
    Start a blog, they said. People will read it, they said.
    Reply With Quote Reply With Quote
  7. May 11, 2013 01:45 #7
    jaagare
    jaagare is offline
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    150
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is the complete working code up to now except that even thead and tfoot rows are hidden when filter is applied. I have also added the Clear Filter option in drop down

    Code:
    <!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Table filter</title>
  <style>
.two {
	background: red;
}
.three {
	background: green;
}
.five {
	background: blue;
}
.six {
	background: pink;
}
.seven {
	background: gray;
}
.eight {
	background: yellow;
}
.nine {
	background: orange;
}
select {
	margin: 0 0 15px 0
}
</style>
  </head>

  <body>
<select id="mySelect">
    <option value="zero">Clear Filter - Show All</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
    <option value="six">Six</option>
    <option value="seven">Seven</option>
    <option value="eight">Eight</option>
    <option value="nine">Nine</option>
  </select>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
    <thead>
    <tr>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
      </tr>
  </thead>
    <tfoot>
    <tr>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
        <th>*</th>
      </tr>
  </tfoot>
    <tbody>
    <tr class="five">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="six">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="nine">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="five">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="three">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="two">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="seven">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="five">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="eight">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
    <tr class="two">
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
        <td>*</td>
      </tr>
  </tbody>
  </table>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script>
      $("#mySelect").on("change", function(){
        var opt = $(this).val();
        $("tr").each(function(){
          var tr = $(this);
	  tr.show();
          if (! tr.hasClass(opt)){
            tr.hide();
          }
	  if (opt == "zero"){
            tr.show();
          }
        });
      });
    </script>
</body>
</html>
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...
    Reply With Quote Reply With Quote
  8. May 11, 2013 02:42 #8
    Pullo
    Pullo is online now
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,370
    Mentioned
    38 Post(s)
    Tagged
    1 Thread(s)
    Hi there,

    This'll work now:

    Code:
    <!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Table filter</title>
    <style>
      .two { background: red; }
      .three { background: green; }
      .five { background: blue; }
      .six { background: pink; }
      .seven { background: gray; }
      .eight { background: yellow; }
      .nine { background: orange; }
      select { margin: 0 0 15px 0 }
    </style>
  </head>

  <body>
    <select id="mySelect">
      <option value="zero">Clear Filter - Show All</option>
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
      <option value="four">Four</option>
      <option value="five">Five</option>
      <option value="six">Six</option>
      <option value="seven">Seven</option>
      <option value="eight">Eight</option>
      <option value="nine">Nine</option>
    </select>
    
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
          <th>*</th>
        </tr>
      </tfoot>
      <tbody>
        <tr class="five">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="six">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="nine">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="five">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="three">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="two">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="seven">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="five">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="eight">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
        <tr class="two">
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
          <td>*</td>
        </tr>
      </tbody>
    </table>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script>
      $("#mySelect").on("change", function(){
        var opt = $(this).val();
        $("tr", "tbody").each(function(){
          var tr = $(this);
          tr.show();
          
          if (opt == "zero"){
            tr.show();
          } else if (! tr.hasClass(opt)){
            tr.hide();
          }
        });
      });
    </script>
  </body>
</html>
    The way it works, is that you can use a little trick to give your selectr context.
    So this:

    Code JavaScript:
    $("tr", "tbody")

    will select every "tr" element which occurs within the "tbody" element (as opposed to anywhere on the page).

    Hope it helps.
    Start a blog, they said. People will read it, they said.
    Reply With Quote Reply With Quote
  9. May 11, 2013 03:37 #9
    jaagare
    jaagare is offline
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    150
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Works Perfect.

    I was trying to use the selector tbody>tr but somehow that was not selecting the correct values. "tr", "tbody" does the trick.

    Thanks once again.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...
    Reply With Quote Reply With Quote
  10. May 11, 2013 10:40 #10
    Pullo
    Pullo is online now
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,370
    Mentioned
    38 Post(s)
    Tagged
    1 Thread(s)
    No probs

    Quote Originally Posted by jaagare View Post
    I was trying to use the selector tbody>tr but somehow that was not selecting the correct values.
    Strange. This should work equally as well:

    Code JavaScript:
    $("tbody > tr").each(function(){ ... });
    Start a blog, they said. People will read it, they said.
    Reply With Quote Reply With Quote
  11. May 11, 2013 22:23 #11
    jaagare
    jaagare is offline
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    150
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ok I found the issue why it was not working I had it as

    Code:
    $(tbody > tr).each(function(){ ... });
    instead of

    Code:
    $("tbody > tr").each(function(){ ... });
    " - QUOTES missing from my function. Hence was not working. Thanks a ton.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules