Filter with CLASS and Javascript

Question

I'm trying to make a filter on a table but it doesn't want to work at all.

This is what i have so far.

This must all run on the same page without external stuff (if it's possible)

This is my Javascript part:

<script type="text/javascript">

 $(document).load(function () {
   $('#SoortFilter').change(function () {
     $(".all-sc").hide();
     $("." + $(this).find(":selected").attr("id")).show();
   });
 });

  $(document).load(function () {
   $('#OnderwerpFilter').change(function () {
     $(".all-oc").hide();
     $("." + $(this).find(":selected").attr("id")).show();
   });
 });

  $(document).load(function () {
   $('#GraadFilter').change(function () {
     $(".all-gc").hide();
     $("." + $(this).find(":selected").attr("id")).show();
   });
 });

</script>

This is my HTML part:

<div class="myTable">

<table><tr>

<td>Sorteer op soort:<br><select size="1" id="SoortFilter">
<option id="all-sc">Alles tonen</option>
<option id="SC1">Opwarming</option>
<option id="SC2">Oefening</option>
<option id="SC4">Andere</option>
</select></td>

<td>Sorteer op onderwerp:<br><select size="1" id="OnderwerpFilter">
<option id="all-oc">Alles tonen</option>
<option id="OC11">Voetenwerk algemeen</option>
<option id="OC21">Tactiek dubbel</option>
<option id="OC23">Wedstrijd analyse</option>
</select></td>

<td>Sorteer op graad:<br><select size="1" id="GraadFilter">
<option id="all-gc">Alles tonen</option>
<option id="GC2">Gemakkelijk</option>
<option id="GC3">Gemiddeld</option>
<option id="GC4">Moeilijk</option>
<option id="GC6">Variabel</option>
</select></td>

</tr></table>

</div>


<div class="myTable"><table id="myTable">

         <tr>
         <td>ID</td>
         <td><img src="check.png" width="20" height="20"><img src="wait.png" width="20" height="20"></td>
         <td>Soort</td>
         <td>Onderwerp</td>
         <td>Graad</td>
         <td>Benaming</td>
         <td>URL</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC1 OC11 GC6">
         <td>4</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Opwarming</td>
         <td>Voetenwerk algemeen</td>
         <td>Variabel</td>
         <td>Agility oefeningen</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=67XP-AekUoA>https://www.youtube.com/watch?v=67XP-AekUoA</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC2">
         <td>8</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemakkelijk</td>
         <td>Splitstep - fundamentals - Kyo groen</td>
         <td><a target="_blank"  href=https://drive.google.com/file/d/0B0NYVs9pQgGSZzhCQXg3dnFfYUE/edit?pref=2&pli=1>https://drive.google.com/file/d/0B0NYVs9pQgGSZzhCQXg3dnFfYUE/edit?pref=2&pli=1</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC3">
         <td>11</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemiddeld</td>
         <td>Vertrek vanuit de basis</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=WNgt6P_RDLc>https://www.youtube.com/watch?v=WNgt6P_RDLc</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC21 GC4">
         <td>23</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Tactiek dubbel</td>
         <td>Moeilijk</td>
         <td>Lee Bok - Positiespel dubbel</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=XMYbU08AOaw&feature=youtu.be>https://www.youtube.com/watch?v=XMYbU08AOaw&feature=youtu.be</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>14</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren dubbel - halve finale</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=uKj4S9ig7c8>https://www.youtube.com/watch?v=uKj4S9ig7c8</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>15</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren enkel - finale</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=ytjD4f_I0sc>https://www.youtube.com/watch?v=ytjD4f_I0sc</td>
         </tr>


</table></div>

</div>

your links are wrong! I test your code! example: href=https://www.youtub... need "" href="https://www.youtub...." — Maxi Schvindt, Feb 15 '16 at 22:16
it's not about the links,, the links work perfectly... even without the " " (my table is a result of a PHP + MSSQL echo) i'm having trouble with the class filter — Thomas Dutoit, Feb 15 '16 at 22:28
You should patch the link, they may be the root of some bug. `link` — Blag, Feb 15 '16 at 22:31
your html is wrong => javscript probably not work.. filter work separate or suport filter with two or three selects values eg: Opwarming and Gemakkelijk? — Maxi Schvindt, Feb 15 '16 at 22:42
http://stackoverflow.com/questions/35418834/filter-with-class-and-javascript/35420575#35420575 — Maxi Schvindt, Feb 15 '16 at 22:50
YES YES YES CUCHU THANK YOU VERRY MUCH Thats the exact answer i needed — Thomas Dutoit, Feb 15 '16 at 22:52
@ThomasDutoit yes, that's exactly what I have in my answer... — Blag, Feb 15 '16 at 22:58
i only have one problem left, my first table row (header) disappears when i select a filter — Thomas Dutoit, Feb 15 '16 at 22:59
@Blag thanks but i didn't know how i had to connect it all with jquery library — Thomas Dutoit, Feb 15 '16 at 23:00
@ThomasDutoit ok, take a look, I put how to JQuery and I display the header line of your table now. — Blag, Feb 15 '16 at 23:05

Maxi Schvindt · Accepted Answer · 2016-02-15T23:26:06.610

Check this option:

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>



<div class="myTable">

<table><tr>

<td>Sorteer op soort:<br><select size="1" id="SoortFilter">
<option id="all-sc">Alles tonen</option>
<option id="SC1">Opwarming</option>
<option id="SC2">Oefening</option>
<option id="SC4">Andere</option>
</select>
</td>

<td>Sorteer op onderwerp:<br><select size="1" id="OnderwerpFilter">
<option id="all-oc">Alles tonen</option>
<option id="OC11">Voetenwerk algemeen</option>
<option id="OC21">Tactiek dubbel</option>
<option id="OC23">Wedstrijd analyse</option>
</select>
</td>

<td>Sorteer op graad:<br><select size="1" id="GraadFilter">
<option id="all-gc">Alles tonen</option>
<option id="GC2">Gemakkelijk</option>
<option id="GC3">Gemiddeld</option>
<option id="GC4">Moeilijk</option>
<option id="GC6">Variabel</option>
</select>
</td>

</tr>
</table>

</div>


<div class="myTable">
<table id="myTable">

         <tr id="thead">
         <td>ID</td>
         <td><img src="check.png" width="20" height="20"><img src="wait.png" width="20" height="20"></td>
         <td>Soort</td>
         <td>Onderwerp</td>
         <td>Graad</td>
         <td>Benaming</td>
         <td>URL</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC1 OC11 GC6">
         <td>4</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Opwarming</td>
         <td>Voetenwerk algemeen</td>
         <td>Variabel</td>
         <td>Agility oefeningen</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC2">
         <td>8</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemakkelijk</td>
         <td>Splitstep - fundamentals - Kyo groen</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC3">
         <td>11</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemiddeld</td>
         <td>Vertrek vanuit de basis</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC21 GC4">
         <td>23</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Tactiek dubbel</td>
         <td>Moeilijk</td>
         <td>Lee Bok - Positiespel dubbel</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>14</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren dubbel - halve finale</td>
         <td></td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>15</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren enkel - finale</td>
         <td></td>
         </tr>


</table></div>


<body>
</html>

and javascript

<script type="text/javascript">
$(document).ready(function () {
   $('#SoortFilter').change(function () {
     //$(".all-sc").hide();
     filter();
     //$("." + $(this).find(":selected").attr("id")).show();
   });

   $('#GraadFilter').change(function () {
     filter();
     //$(".all-gc").hide();
     //$("." + $(this).find(":selected").attr("id")).show();
   });

   $('#OnderwerpFilter').change(function () {
     filter();
     //$(".all-oc").hide();
     //$("." + $(this).find(":selected").attr("id")).show();
   });

 });

 function filter () {
        one = $("#SoortFilter").find(":selected").attr("id");
    two = $("#OnderwerpFilter").find(":selected").attr("id");
    three = $("#GraadFilter").find(":selected").attr("id");
    filt = "."+one+"."+two+"."+three;
    $("#myTable tr").hide();
    $(filt).show();
    $("#thead").show(); 
    alert(filt);
 }
</script>

Test in link https://jsfiddle.net/Cuchu/kbkkg4mc/

The code of OP had errors in html structure, the code html was broke because a tag has not correctly closed attr href. jQuery was not included. The functions javascript they filtered by a class. In the solution, filter works with all class(selects) and show all coincidence.

Add id 'thead' to row head and add $("#thead").show(); in a javascript, see a code again! — Maxi Schvindt, Feb 15 '16 at 23:04
Please add both the reason the OP's code was wrong, and how your code fixes his problem so that this can be helpful to more people then just the OP. — Ryan, Feb 15 '16 at 23:06

score 0 · Answer 2 · edited May 23 '17 at 11:59

This use JQUERY => Where do you include the jQuery library from? Google JSAPI? CDN?

here is the full one that work

function jsUnitFilter() {
  // get the value of the selected link
  var reqGraad = $('#GraadFilter').val();
  var reqOnderwerp = $('#OnderwerpFilter').val();
  var reqSoort = $('#SoortFilter').val();

  // we hide everything
  $("#myTable").find('tr').hide();

  $("#myTable").find("tr." + reqGraad + "." + reqOnderwerp + "." + reqSoort).show();
  $("#myTable").find("tr:first-child").show();


  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myTable">

  <table>
    <tr>

      <td>Sorteer op soort:
        <br>
        <select size="1" id="SoortFilter" onchange="jsUnitFilter()">
          <option value="all-sc">Alles tonen</option>
          <option value="SC1">Opwarming</option>
          <option value="SC2">Oefening</option>
          <option value="SC4">Andere</option>
        </select>
      </td>

      <td>Sorteer op onderwerp:
        <br>
        <select size="1" id="OnderwerpFilter" onchange="jsUnitFilter()">
          <option value="all-oc">Alles tonen</option>
          <option value="OC11">Voetenwerk algemeen</option>
          <option value="OC21">Tactiek dubbel</option>
          <option value="OC23">Wedstrijd analyse</option>
        </select>
      </td>

      <td>Sorteer op graad:
        <br>
        <select size="1" id="GraadFilter" onchange="jsUnitFilter()">
          <option value="all-gc">Alles tonen</option>
          <option value="GC2">Gemakkelijk</option>
          <option value="GC3">Gemiddeld</option>
          <option value="GC4">Moeilijk</option>
          <option value="GC6">Variabel</option>
        </select>
      </td>

    </tr>
  </table>

</div>


<div class="myTable">
  <table id="myTable">

    <tr>
      <td>ID</td>
      <td>
        <img src="check.png" width="20" height="20">
        <img src="wait.png" width="20" height="20">
      </td>
      <td>Soort</td>
      <td>Onderwerp</td>
      <td>Graad</td>
      <td>Benaming</td>
      <td>URL</td>
    </tr>

    <tr class="all-sc all-oc all-gc SC1 OC11 GC6">
      <td>4</td>
      <td>
        <img src="check.png" width="20" height="20">
      </td>
      <td>Opwarming</td>
      <td>Voetenwerk algemeen</td>
      <td>Variabel</td>
      <td>Agility oefeningen</td>
      <td><a target="_blank" href=https://www.youtube.com/watch?v=67XP-AekUoA>https://www.youtube.com/watch?v=67XP-AekUoA</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC2">
         <td>8</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemakkelijk</td>
         <td>Splitstep - fundamentals - Kyo groen</td>
         <td><a target="_blank"  href=https://drive.google.com/file/d/0B0NYVs9pQgGSZzhCQXg3dnFfYUE/edit?pref=2&pli=1>https://drive.google.com/file/d/0B0NYVs9pQgGSZzhCQXg3dnFfYUE/edit?pref=2&pli=1</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC11 GC3">
         <td>11</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Voetenwerk algemeen</td>
         <td>Gemiddeld</td>
         <td>Vertrek vanuit de basis</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=WNgt6P_RDLc>https://www.youtube.com/watch?v=WNgt6P_RDLc</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC2 OC21 GC4">
         <td>23</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Oefening</td>
         <td>Tactiek dubbel</td>
         <td>Moeilijk</td>
         <td>Lee Bok - Positiespel dubbel</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=XMYbU08AOaw&feature=youtu.be>https://www.youtube.com/watch?v=XMYbU08AOaw&feature=youtu.be</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>14</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren dubbel - halve finale</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=uKj4S9ig7c8>https://www.youtube.com/watch?v=uKj4S9ig7c8</td>
         </tr>

         <tr class="all-sc all-oc all-gc SC4 OC23 GC6">
         <td>15</td>
         <td><img src="check.png" width="20" height="20"></td>
         <td>Andere</td>
         <td>Wedstrijd analyse</td>
         <td>Variabel</td>
         <td>Londen 2012 - Heren enkel - finale</td>
         <td><a target="_blank"  href=https://www.youtube.com/watch?v=ytjD4f_I0sc>https://www.youtube.com/watch?v=ytjD4f_I0sc</td>
         </tr>


</table>
</div>

my version use a `hidden` CSS class, if you don't have it, it'll fail. I filter with the class I've add on `` line — Blag, Feb 15 '16 at 22:22
so part of the code you posted is missing?? isn't there anything simpler to use for a filter — Thomas Dutoit, Feb 15 '16 at 22:24

score 0 · Answer 3 · answered Feb 15 '16 at 22:11

0

You have a little mistake. you should use $(document).ready(). I've solved your problem just by using ready event.

$(document).ready(function(){
    $('#SoortFilter').change(function () {
        $(".all-sc").hide();
            $("." + $(this).find(":selected").attr("id")).show();
  });
});

answered Feb 15 '16 at 22:11

Mahdi Ghandi

109
8

i tried that but its not changing anything, doesn't function at all – Thomas Dutoit Feb 15 '16 at 22:22
do i have to use – Thomas Dutoit Feb 15 '16 at 22:22
@ThomasDutoit but it worked for me. do you want to show you on jsfiddle? – Mahdi Ghandi Feb 15 '16 at 22:23
1

@ThomasDutoit hey Thomas, check it out: https://jsfiddle.net/linkers/t5dxvwe7/2/ you should include jquery library, did you? – Mahdi Ghandi Feb 15 '16 at 22:32
i did not, i never learned jquery but it's getting close. now the situation is like this: i put on a filter 'Soort' the filter gets active, but when i select a second filter it pushes the first one away and how can i put this all together in one page – Thomas Dutoit Feb 15 '16 at 22:38
@ThomasDutoit don't worry. these are your first steps :D I want you to ask another question about it to be solved better. – Mahdi Ghandi Feb 15 '16 at 22:40
@MahdiGhandi no, it's the same question, and that's why the OP method is not good, and why mine seem so complex – Blag Feb 15 '16 at 22:43
How can i all make this in javascript (not jquery) because everything in the table and options are loaded from an PHP echo that gets data from MSSQL The problem is it has to be simple but effective and in my opinion, jquery ain't easy xd – Thomas Dutoit Feb 15 '16 at 22:45
isn't there any system like GetelementsbyCLASS and Style: Display=Inline or none – Thomas Dutoit Feb 15 '16 at 22:47
@ThomasDutoit jQuery is completely easier than pure javascript. – Mahdi Ghandi Feb 15 '16 at 22:47
1

@MahdiGhandi ok, I've updated my answer, take a look, you'll understand what I mean by "no the good way to do it" ;) – Blag Feb 15 '16 at 22:49

Filter with CLASS and Javascript

3 Answers3