如何将jQuery过滤器添加到html表? [英] How to add a jQuery filter to a html table?

问题描述

我正在尝试使用JQuery将下拉过滤器放到html表中.这是代码.

I'm trying to put a drop down filter to a html table using JQuery. Here's the code.

report.php

report.php

<table id ="myTable" class="table table-striped">

            <thead>
                <tr>
                    <th></th>
                    <th> First Name </th>
                    <th> Last Name </th>                  
                    <th> Phone </th>
                    <th> Email </th>              
                    <th> Gender</th>

                        <th>Term
                        <select id="filterText"  onchange='filterText()'>
                              <option disabled selected>Select</option>
                              <option value="all">All</option>
                              <option value="Fall2018">Fall2018</option> 
                              <option value="Srping2019">Spring2019</option>
                        </select></th>
                    <th> Action </th>

                </tr>
            </thead> 
            <?php
            if (count($report) === 0) {
                echo "<tr>No Reports</tr>";
            } else {

                for ($i = 0; $i < count($report); $i++) {

                    echo

                    "<tr class='row'>

                        <td>{$report[$i]['FName']}</td>
                        <td>{$report[$i]['LName']}</td>
                        <td>{$report[$i]['HPhone']}</td>
                        <td>{$report[$i]['PEmail']}</td>
                        <td>{$report[$i]['Gender']}</td>
                        <td>{$report[$i]['Term']}</td>

                        <td><a class=btn href='read.php?id=".$report[$i]['RegId']."'>Read</a></td>  

                    </tr>";

                }
            }



            ?>
        </table>

main.js

function filterText()
    {  
        var rex = new RegExp($('#filterText').val());
        if(rex ==="/all/"){clearFilter();}else{
            $('.row').show();
            $('.row').filter(function() {
            return rex.test($(this).text());
            }).hide();
    }
    }

   function clearFilter()
    {
        $('.filterText').val('');
        $('.row').show();
    }

我正在将下拉过滤器添加到term列.此代码给出相反的结果.就像我单击下拉菜单的全部"选项时一样，结果中将显示Spring2019.当我单击"Spring2019"时，它将显示所有值.而且``2018年秋季''还显示了2019年春季的所有值.

I'm adding the dropdown filter to the term column. This code gives the opposite results. Like when I click on the 'All' option of the dropdown, it shows Spring2019 in the results. And when I click on the 'Spring2019' it shows all the values. And 'Fall2018' also shows all the Spring2019 values.

您可以检查代码中的错误吗?

Can you check what is wrong in the code?

推荐答案

Salam，我认为您可以按单元格文本而不是行文本进行过滤，只需将类添加到您的单元格中

Salam, i think you can filter by cell text instead of row text, just add class to your cell

<td>{$report[$i]['Term']}</td>

喜欢

<td class='term'>{$report[$i]['Term']}</td>

并将搜索功能更改为

function filterText()
    {  
        var val = $('#filterText').val().toLowerCase();
        if(val === "")
           return;
        if(val === "all")
          clearFilter();
        else
        $('.term').each(function() {
            $(this).parent().toggle($(this).text().toLowerCase() === val);
            });

    }

这篇关于如何将jQuery过滤器添加到html表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！