javascript - 如何将 jQuery 过滤器添加到 html 表中？

Question

我正在尝试使用 JQuery 将下拉过滤器添加到 html 表格中。这是代码。

报告.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>

主要.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

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

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

    }