如何向 html 表格添加 jQuery 过滤器?

2024-01-07

我正在尝试使用 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>

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”时,它会显示所有值。 “2018 年秋季”还显示了 2019 年春季的所有值。

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


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

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

    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何向 html 表格添加 jQuery 过滤器? 的相关文章

  • 消息“在 jest.setTimeout 指定的 5000 毫秒超时内未调用异步回调”

    我正在使用 Puppeteer 和 Jest 来运行一些前端测试 我的测试如下 describe Profile Tab Exists and Clickable settings user gt test Assert that you
  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • jQuery 选择 # id 以单词为前缀,计数器为后缀

    有没有办法用 jQuery 选择所有带有前缀 my 和后缀 0 9 的 id 像这样的 my 1 4 还是可以用循环来实现 div div div div div div div div div div 第一个想法 似乎效果很好 div i
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案?

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • 使用 CryptoJS 更改密钥 [重复]

    这个问题在这里已经有答案了 我正在使用 CryptoJS 来加密和解密文本 在这里 我只是获取消息并显示加密和解密消息 我使用DES算法进行加密和解密 这是我的 HTML 文件
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 如何通过jquery更改元素的类名

    div class bestAnswerControl div class IsBestAnswer div div 我想补充一下 bestanswer some attribute 我想更换class IsBestAnswer div 到
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas

随机推荐