JSFiddle - React, Tailwind, and code Playground

by Erwin Maximiliano

HTML

<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="theader">
         <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...

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();
    $("#theader").show();
    $(filt).show();
    alert(filt);
 }