Javascript：帶複選框的表格篩選器

我正在研究website，正如您所看到的，我有一張內容列表，其頂部有一些過濾器可用於過濾結果。基本上你點擊複選框，可以過濾rowsJavascript：帶複選框的表格篩選器

的結果，我其實是想用這個script嘗試過濾結果，但不工作

$(document.body).on('change', "#zimmer4", function() { 
    $("#tableID tr.zimmer4").toggle(!this.checked); 
}); 

$(document.body).on('change', "#zimmer3", function() { 
    $("#tableID tr.zimmer3").toggle(!this.checked); 
}); 

$(document.body).on('change', "#zimmer2", function() { 
    $("#tableID tr.zimmer2").toggle(!this.checked); 
});

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<span class="dropdown"> 
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Zimmer 
      <span class="caret"></span> 
</button> 
<ul class="dropdown-menu"> 
    <form class="filter"> 
    <input id="zimmer4" class="unchecked" type="checkbox">4.5 
    <br> 
    <input id="zimmer3" class="unchecked" type="checkbox">3.5 
    <br> 
    <input id="zimmer2" class="unchecked" type="checkbox">2.5 
    <br> 
    </form> 
</ul> 
</span>

HTML表格行：

<div id="wrap" class="tabelle"> 
<table class="table" id="tableID"> 
<thead> 
<tr> 
<th>Wohnung</th> 
<th>Zimmer</th> 
<th>Stockwerk</th> 
<th>Nettomiete</th> 
<th>Bruttomiete</th> 
<th>PDF</th> 
</tr> 
</thead> 
<tbody> 
<tr class="row1 row2OG row3OG zimmer3 zimmer2 range1 range2 range3 range5"> 
<td>1.001</td> 
<td>4.5</td> 
<td>EG/1. OG</td> 
<td>2252</td> 
<td>2500</td> 
<td><a href="/table/pdfs/01.001.pdf" target="_blank"><img src="/img/pdf.png" alt=""></a></td> 
</tr> 
</tbody> 
</table> 
</div>

我在做什麼錯了？

感謝諮詢

來源

2016-05-30 developppping

使用此代碼，

最終代碼：

<html> 
<head> 
</head> 
    <style> 
     .hid { 
      display: none; 
     } 
    </style> 
    <body> 
     <select id="zimmer"> 
      <option value="all">Select Zimmer</option> 
      <option value="2.5">2.5</option> 
      <option value="3.5">3.5</option> 
      <option value="4.5">4.5</option> 
     </select> 
     <table id="tab"> 
      <tr><th>Wohnung</th><th>Zimmer</th><th>Stockwerk</th></tr> 
      <tr class="2.5"><td>xxx</td><td>2.5</td><td>www</td></tr> 
      <tr class="4.5"><td>xx</td><td>4.5</td><td>www</td></tr> 
      <tr class="3.5"><td>aaa</td><td>3.5</td><td>www</td></tr> 
      <tr class="3.5"><td>qqq</td><td>3.5</td><td>www</td></tr> 
      <tr class="3.5"><td>fff</td><td>3.5</td><td>www</td></tr> 
      <tr class="4.5"><td>ppp</td><td>4.5</td><td>www</td></tr> 
     </table> 
     <script> 
      var ele = document.getElementById("zimmer"); 
      var rows = document.getElementById("tab").rows; 
      ele.addEventListener('change',filterTable); 
      function filterTable() { 
       for(var i = 1; i < rows.length; i++){ 
        if(rows[i].classList.contains(this.value)) 
         rows[i].classList.remove("hid"); 
        else if (this.value == "all") 
         rows[i].classList.remove("hid"); 
        else 
         rows[i].classList.add("hid"); 

       } 

      } 
     </script> 
    </body> 
</html>

來源

2016-05-30 12:21:00 Ehsan

這不工作... ... – developppping

@developppping？ – Ehsan

@developppping將您的代碼複製到您的編輯器中並運行它。如果不起作用，請更清楚地詢問您的問題。 – Ehsan

使用您的示例中的代碼，它應該工作。還要檢查您網站上的控制檯，它提供了一個錯誤：

Uncaught TypeError: $ is not a function

我創建了一個小提琴從您的代碼，但editted一件小事：我假設你想顯示至極複選框被選中的行。而不是躲在他們當您選擇複選框：選中的複選框時3.5或2.5因此行deleted.what是你的問題

https://jsfiddle.net/pp34rxhp/1/

來源

2016-05-30 12:48:56 Pimmol

嗨，我試過，但沒有奏效。無論如何，當選擇4.5複選框時，我需要隱藏「3.5」或「2.5」的行。 – developppping

當您打開小提琴時，當您選中/取消選中複選框時，行不會切換？ – Pimmol

是的，我可以看到行，然後當你取消勾選複選框，他們被隱藏...我想「過濾」行。例如，當選擇「4.5」複選框時，隱藏「3.5」和「2.5」行... – developppping

Javascript：帶複選框的表格篩選器

回答

相關問題