Question

我试图在桌子上制作一个过滤器，但它根本不想工作。

这是我到目前为止所做的。

这必须全部在没有外部内容的同一页面上运行（如果可能的话）

这是我的Javascript部分：

<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>

这是我的HTML部分：

<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>

Answer 1

选中此选项：

<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>

和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>

在链接https://jsfiddle.net/Cuchu/kbkkg4mc/

中测试

OP的代码在html结构中有错误，代码html被破坏，因为标签没有正确关闭attr href。 jQuery没有包括在内。他们按类过滤的函数javascript。在解决方案中，过滤器适用于所有类（选择）并显示所有重合。

Answer 2

这使用JQUERY =＆gt; Where do you include the jQuery library from? Google JSAPI? CDN?

这是完整的工作

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>

Answer 3

你有一点错误。你应该使用$(document).ready()。我只是使用ready事件解决了您的问题。

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

使用CLASS和Javascript过滤

3 个答案: