jQuery实现对表格内容的模糊查询
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="css/style.css" mce_href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="D:/Demo/jquery-1.8.0.js"></script>
<script type="text/javascript">
$().ready(function(){
$("#txtName").keyup(
function(){
$("table tr:gt(0)").hide();
var $d = $("table tr:gt(0)").filter(":contains('"+$.trim($("#txtName").val())+"')");
$d.show();
}
)
})
</script>
</head>
<body>
<p><strong>实现动态列表内容查询</strong></p>
<div>
<input type="text" id="txtName" />
</div>
<br />
<table width="438" height="auto" border="1">
<tr>
<td>编号</td>
<td>名称</td>
<td>类别</td>
<td>著作</td>
</tr>
<tr>
<td>1001</td>
<td>天龙八部</td>
<td>武侠</td>
<td>金庸</td>
</tr>
<tr>
<td>1002</td>
<td>小李飞刀</td>
<td>武侠</td>
<td>古龙</td>
</tr>
<tr>
<td>1003</td>
<td>逆水寒</td>
<td>言情</td>
<td>温瑞安</td>
</tr>
<tr>
<td>1004</td>
<td>天涯明月刀</td>
<td>武侠</td>
<td>古龙</td>
</tr>
<tr>
<td>1005</td>
<td>朝天一棍</td>
<td>武侠</td>
<td>温瑞安</td>
</tr>
<tr>
<td>1006</td>
<td>侠骨丹心</td>
<td>武侠</td>
<td>梁羽生</td>
</tr>
<tr>
<td>1007</td>
<td>神雕侠侣</td>
<td>武侠</td>
<td>金庸</td>
</tr>
<tr>
<td>1008</td>
<td>陆小凤传奇</td>
<td>武侠</td>
<td>古龙</td>
</tr>
<tr>
<td>1009</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
select多选下拉列表+模糊查询功能,亲测完整,有ASP和HTML样例,代码完整。 <!DOCTYPE html> <title>Insert title here</title> <script src="jquery.min.js"> <script type="text/javascript" src="jquery....
主要介绍了jQuery实现模糊搜索功能的方法,结合实例形式总结分析了jQuery关键字搜索、模糊查询、动态删除table数据等相关操作技巧,需要的朋友可以参考下
05 模糊查询之万能的双下换线 第52章 01 上节知识回顾 02 ORM多表操作之一对多增加记录 03 ORM多表操作之一对多查询之对象查询 04 ORM多表操作之一对多查询之双下划线查询 05 ORM多表操作之多对多添加记录 06 ORM...
:kiss_mark: spring boot项目实战基础脚手架,提供基础增,减,改,查模板,批量删除,局部刷新,多条件模糊查询,视图切换,设置显示分段,动态分页等功能 技术栈 前端 名称 版本 说明 官网 jQuery的 3.4.1 ...
当然你也可以使用jquery或者ajax写动态加载table的方式来实现,方式多种多样,感兴趣的朋友可以了解下,希望本文提供的静态刷新页面对你学习ajax有所帮助
1、采用SpringMVC+Hibernate+Minidao(类Mybatis)+Easyui(UI库)+Jquery+Boostrap+Ehcache+Redis+Ztree+Vue+Boostrap-table+ElementUI等基础架构 2、采用面向声明的开发模式,基于泛型编写极少代码即可实现复杂的数据...
提供模糊搜索功能,根据输入的参数模糊匹配返回对应的结果 2. 数值类型(num) 提供区间搜索功能,所搜列必须为数值,可以搜索最小值和最大值之间的结果,也可以搜索所有大于最小值或小于最大值的结果。 3. 日期类型...
此脚本尚未完成 :-) ... input class =" blur-save " data-id =" id " data-label =" Name of the field " data-db =" table-field " > 分解: 模糊保存: ```html class="blur-save" ``` 这个类名告诉 jQuery
1、采用SpringMVC+Hibernate+Minidao(类Mybatis)+Easyui(UI库)+Jquery+Boostrap+Ehcache+Redis+Ztree+Vue+Boostrap-table+ElementUI等基础架构2、采用面向声明的开发模式,基于泛型编写极少代码即可实现复杂的数据...
在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView...