正文 

当前位置： 首页 > java > java教程

jquery实现表格的搜索功能

晴晴加油 晴晴加油     2022-08-01     466

关键词：

版权声明：作者原创，转载请注明出处！

HTML代码如下：

<input type="text" id="txt" value="" />
<input type="button" id="btn" value="搜索" />
<table border="1" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>13112345678</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>1345454548</td>
        </tr>
        <tr>
            <td>王小花</td>
            <td>女</td>
            <td>1234567890</td>
        </tr>
        <tr>
            <td>笑笑</td>
            <td>女</td>
            <td>1098909223</td>
        </tr>
    </tbody>
</table>
View Code

CSS样式代码如下：

table{
    width: 700px;
    border: 1px solid #008000;
    margin: 10px 0 0 0;
    border-collapse: collapse;/*表格边框合并*/
}
tr{
    height: 30px;
    text-align: center;
}
th,td{
    border: 1px solid #008000;
}
View Code

jquery代码如下：（你要先引入jquery的js文件(⊙o⊙)哦）

$(function () {
    $("#btn").click(function () {
        var $sea=$('#txt').val();
        //先隐藏全部，再把符合筛选条件的值显示
        $('table tbody tr').hide().filter(':contains('+$sea+')').show();
    });
});

未进行筛选的样子

 

筛选之后(⊙o⊙)哦

未完待续......

你也赶紧运行起来吧！！

jquery实现多条件筛选特效代码分享

本文实例讲述了jquery实现多条件筛选特效。分享给大家供大家参考。具体如下：jquery实现的多条件搜索表单带日期选择表格表单效果源码，是一段实现了多个条件筛选搜索的特效代码，多条件拥有时间、地点、酒店位置及酒店名... 查看详情

jquery实现html表格单元格的合并功能

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></ti 查看详情

js实现表格数据各种搜索功能的方法

参考技术A本文实例讲述了JS实现表格数据各种搜索功能。可忽略大小写,模糊搜索,多关键搜索。分享给大家供大家参考。具体实现方法如下：复制代码代码如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title... 查看详情

jquery实现html表格单元格的合并功能(合并内容相同的行或列)

/***desc:合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格*@table_id表格id:为需要进行合并单元格的表格的id。如在HTMl中指定表格id="data"，此参数应为#data*@table_colnum:为需要合并单元格的所在列.参... 查看详情

如何使用配置了ajax搜索的select2 jquery插件实现选择所有功能。？

】如何使用配置了ajax搜索的select2jquery插件实现选择所有功能。？【英文标题】：Howtoimplementselectallfunctionalitywithselect2jquerypluginconfiguredwithajaxsearch.?【发布时间】：2017-09-0502:18:30【问题描述】：我目前使用select2jquery插件从ajax调用... 查看详情

jquery实现简单前端搜索功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>工程轻量化与可靠性技术实验室</title></head><body><divclass="content-right"><inputtype="text"&g 查看详情

jquery实现表格中点击相应行变色功能(代码片段)

对于一个表格，为了使我们选中的项更容易区分，需要为选中项添加高亮，同时也需要，将其他项的高亮形式去除。类似于：<!DOCTYPEhtml><htmllang="en"xmlns="http://www.w3.org/1999/xhtml"><head><metacharset="utf-8"/><title></... 查看详情

jquery练习--[实现左移右移功能,实现列表动态新增,删除功能；实现表格隔行变色,选中时高亮显示.](代码片段)

(1)实现左移右移功能实现左移右移功能，点击向右按钮把左边选中的内容移动到右边.<html> <head> <metacharset="utf-8"/> <title></title> <!--部署jQuery--> <scriptsrc="js/jquery 查看详情

jquery实现简单的搜索

对一个简单的ul列表进行输入框的搜索功能，搜索之前及搜索后显示效果如下：用到的主要jquery技术有filter()和match()方法以及正则匹配，基础HTML+div设置：<divclass="nav_Element_Item"><h2>数据名称:</h2><divclass="data_search_div... 查看详情

使用ajax+jquery实现搜索框的历史记录提示功能(代码片段)

当键盘离开(keyUP事件)的时候进行进行相关的提示（也就是发送请求进行查询）用一个盒子进行封装历史记录。（平时的时候通过display:none进行隐藏）input的输入框需要通过一个id属性进行绑定，因为Jquery需要使... 查看详情

用jsonp实现搜索框功能的实现

用jsonp实现搜索框功能的实现前面的话：   在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术，在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前... 查看详情

使用ajax实现搜索功能

 　　   最近要做一个搜索功能，网上搜了一圈，终于做出来了，这里分享我的方法,希望对大家有用，不足之处还请指教。   这里使用ajax提交数据，配合jquery将数据显示出来。   用jq的keyup触... 查看详情

jquery怎么实现搜索框搜索功能

参考技术Ajquery怎么实现搜索框搜索功能示例代码L:(function($)$.fn.Z_TMAIL_SIDER_V2=function(options)varopts=$.extend(,$.fn.Z_TMAIL_SIDER_V2.defaults,options);varbase=this;varthisTitle=$(base).find('.allcategorys');varZ_SubList=$(base).find('.sublist');varnavPosTop=$(... 查看详情

excel表格怎么制作带搜索功能的下拉菜单解答红包重谢

...表头选中，筛选 参考技术B发你的文件来，我给你写代码实现 查看详情

jQuery DataTables 'OR' 搜索/过滤

】jQueryDataTables\\\'OR\\\'搜索/过滤【英文标题】：jQueryDataTables\'OR\'Search/FilterjQueryDataTables\'OR\'搜索/过滤【发布时间】：2014-10-1212:05:10【问题描述】：我正在使用jQueryDataTables(http://www.datatables.net/)来显示一些表格数据。搜索/过滤器... 查看详情

jquery实现可直接编辑的表格

本文实例讲述了JQuery实现可直接编辑的表格。分享给大家供大家参考。具体分析如下：功能：创建一个表格，用户单击某个单元格后，可以直接修改单元格文本。在编辑状态下，用户可按回车键确认修改，按ESC键撤销修改。效果... 查看详情

让表格搜索功能正常工作？

】让表格搜索功能正常工作？【英文标题】：Gettingatablesearchfunctiontoworkcorrectly?【发布时间】：2016-11-1114:45:52【问题描述】：我正在尝试为我的表格创建一个显示JSON数据的搜索栏。这是我的搜索栏功能：funcsearchBar(_searchBar:UISearchB... 查看详情

使用jquery-ui来实现一个ajax的自动完成功能（自动填充搜索框的下拉值）

首先你要在.net拓展包中去搜索 jqueryui（CombinedLibray）安装这么个文件 第二部  在控制器中添加我们根据输入搜索框的值获取符合的记录集的action 第三步 有了数据集，就该去画我们的页面了第四步 修改... 查看详情