Question

我正在处理这个website，你可以看到我有一个内容表，顶部有一些过滤器来过滤结果。基本上，您单击复选框，然后可以在rows

之间过滤结果

我实际上是尝试使用此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>

我做错了什么？

感谢您的建议

Answer 1

使用此代码，

最终代码：

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

Answer 2

使用您示例中的代码，它应该可以工作。还要检查您网站上的控制台，它会出错：

Uncaught TypeError: $ is not a function

我从你的代码中创建了一个小提琴，但编辑了一个小东西：我假设你想要显示选中复选框的行。而不是在选中复选框时隐藏它们：

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

Javascript：带复选框过滤器的表格

2 个答案: