如何将 jQuery 过滤器添加到 html 表中？答案

【问题标题】：How to add a jQuery filter to a html table?如何将 jQuery 过滤器添加到 html 表中？
【发布时间】：2019-06-19 10:35:04
【问题描述】：

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

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 的所有值。

你能检查一下代码有什么问题吗？

【问题讨论】：

如果你问一个 JavaScript 问题，你应该添加 HTML 而不是 PHP。
是的，但这就是我尝试过的。你能看到任何错误吗？为什么会给出相反的结果
如果你有 PHP，你就有生成的 HTML。您可以将其添加到 sn-p 中，以便那些希望帮助您的人更容易。考虑到您公开的代码 - PHP，任何想要帮助的人都必须在服务器上运行 int。
这里的这句话永远不会是真的。如果（雷克斯 ==="/all/"）。您正在使用 === 也比较类型相等性。一个是 RegExp 对象，另一个是字符串。因此，这永远不会是真的。我建议更改以比较控件的值而不是正则表达式
你能帮我编辑一下吗？我对 JavaScript 很陌生

标签： javascript jquery html-table dropdown

【解决方案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);
            });

    }

【讨论】：

嘿，试过了，它只适用于 2018 年秋季，当我点击 2019 年春季时，这些值消失了。一切也不行。值消失了。
salam，我做了一些更改，现在试试看，如果您需要更多帮助，请告诉我
嘿，谢谢.. 现在 2018 年秋季和 2019 年春季工作正常。 Just the All 仅提供 fall2018 值。

【解决方案2】：

Salam，我这边没有问题，尝试在这里运行这个 sn-p，你会发现它工作正常，只要找到你生成的 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>

【讨论】：