Добавить фильтр JQuery в HTML-таблицу

Question

Я пытаюсь поместить раскрывающийся фильтр в HTML-таблицу, используя JQuery.Вот код:

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();
    }

Я добавляю раскрывающийся фильтр к столбцу терминов.Этот код дает противоположные результаты.Например, когда я нажимаю на опцию «Все» в раскрывающемся списке, в результатах отображается Spring2019.И когда я нажимаю на «Spring2019», он показывает все значения.И 'Fall2018' также показывает все значения Spring2019.

Можете ли вы проверить, что не так в коде?

Answer 1

Салам, с моей стороны проблем нет, попробуйте запустить этот фрагмент здесь, и вы увидите, что он работает нормально, просто найдите, какое почтение у вас сгенерировано html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
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);
            });

    }
   function clearFilter()
    {
        $('.filterText').val('');
        $('.row').show();
    }
</script>

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

            <thead>
                <tr>
                    <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> 
            <tbody>             
            <tr class='row'>

            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
            <td class="term">something</td>
            <td><a class=btn href=''>Read</a></td>  
            </tr>
            <tr class='row'>

            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
            <td class="term">Fall2018</td>
            <td><a class=btn href=''>Read</a></td>  
            </tr>
            <tr class='row'>

            <td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
            <td class="term">Spring2019</td>
            <td><a class=btn href=''>Read</a></td>  
            </tr>
            
            </tbody> 
        </table>

Answer 2

Салам, я думаю, что вы можете фильтровать по тексту ячейки вместо текста строки, просто добавьте класс к вашей ячейке

<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);
            });

    }