Javascript：带有复选框过滤器的表_Javascript

Javascript：带有复选框过滤器的表
javascript
Javascript：带有复选框过滤器的表,javascript,Javascript,我正在处理这个问题，正如你所看到的，我有一个目录，上面有一些过滤器来过滤结果。基本上，您可以点击复选框，在行之间过滤结果实际上，我正在尝试使用这个脚本来过滤结果，但不起作用 $(document.body).on('change', "#zimmer4", function() { $("#tableID tr.zimmer4").toggle(!this.checked); }); $(document.body).on('change', "#zimmer3", function()
我正在处理这个问题，正如你所看到的，我有一个目录，上面有一些过滤器来过滤结果。基本上，您可以点击复选框，在
行之间过滤结果
实际上，我正在尝试使用这个脚本来过滤结果，但不起作用
$(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:

齐默

4.5


3.5


2.5




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>


沃农
齐默
斯托克沃克
内托米特
粗野的
PDF
1.001
4.5
EG/1。奥格
2252
2500

我做错了什么
感谢您的建议使用此代码
最终代码：
<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>


.隐藏{
显示：无；
}
选择Zimmer
2.5
3.5
4.5
沃农齐默斯托克沃克
xxx2.5www
xx4.5 www
aaa3.5www
qq3.5www
fff3.5www
ppp4.5www
var ele=document.getElementById（“zimmer”）；
var rows=document.getElementById（“选项卡”）.rows；
ele.addEventListener（'change'，filterTable）；
函数filterTable（）{
对于（变量i=1；i
使用此代码
最终代码：
<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>


.隐藏{
显示：无；
}
选择Zimmer
2.5
3.5
4.5
沃农齐默斯托克沃克
xxx2.5www
xx4.5 www
aaa3.5www
qq3.5www
fff3.5www
ppp4.5www
var ele=document.getElementById（“zimmer”）；
var rows=document.getElementById（“选项卡”）.rows；
ele.addEventListener（'change'，filterTable）；
函数filterTable（）{
对于（变量i=1；i使用示例中的代码，它应该可以工作。
同时检查您站点上的控制台，它会给出一个错误：
Uncaught TypeError: $ is not a function

我根据您的代码创建了一个提琴，但编辑了一件小事：我假设您希望显示选中复选框的行。不要在选中复选框时隐藏它们：
使用示例中的代码，它应该可以工作。
同时检查您站点上的控制台，它会给出一个错误：
Uncaught TypeError: $ is not a function

我根据您的代码创建了一个提琴，但编辑了一件小事：我假设您希望显示选中复选框的行。不要在选中复选框时隐藏它们：
@developping当选中复选框3.5或2.5时，行被删除。您的问题是什么？@developping在编辑器中复制我的所有代码并运行它。如果不起作用，请更清楚地询问您的问题。问题是我使用的代码与我在此处使用的代码完全相同，但不起作用…@developping当选中复选框3.5或2.5时，因此行被删除。您的问题是什么？@developping在编辑器中复制我的所有代码并运行它。如果不起作用，更清楚地问你的问题。问题是我使用的代码与我在这里使用的代码完全相同，不起作用……嗨，我试过了，但不起作用。不管怎样，当选中4.5复选框时，我需要用“3.5”或“2.5”隐藏行。当您打开小提琴时，当您选中/取消选中复选框时，行不会被切换？是的，我可以看到行，然后当您取消选中复选框时，行被隐藏。。。我想“过滤”这些行。例如，选中“4.5”复选框时，“3.5”和“2.5”行将隐藏…这是另一个问题。所以我的小提琴解决了你在问题中提出的问题？没有，因为我试图用你的代码创建一个示例页面，但不起作用。我正在使用Wordpress，我正在使用插件加载JS…嗨，我试过了，但不起作用。不管怎样，当选中4.5复选框时，我需要用“3.5”或“2.5”隐藏行。当您打开小提琴时，当您选中/取消选中复选框时，行不会被切换？是的，我可以看到行，然后当您取消选中复选框时，行被隐藏。。。我想“过滤”这些行。例如，选中“4.5”复选框时，“3.5”和“2.5”行将隐藏…这是另一个问题。所以我的小提琴解决了你在问题中提出的问题？没有，因为我试图用你的代码创建一个示例页面，但不起作用。我正在使用Wordpress，我正在使用插件加载JS。。。