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>
分享到:
相关推荐
在本篇中,我们将深入探讨如何在EasyUI的Datagrid中实现行过滤,特别是行模糊查询功能,以及其在数据库远程查询中的应用。 首先,`EasyUI Datagrid` 是一个强大的表格控件,它允许开发者轻松地展示和操作数据,支持...
根据提供的文件内容,我们可以整理出以下知识点: 1. jQuery插件开发基础 jQuery插件是通过扩展jQuery的功能...开发者可以根据具体需求,编写更复杂的逻辑到插件中,比如实现模糊查询、动态数据绑定等增强型表格功能。
本资源“jQuery实现表格模糊搜索代码.zip”聚焦于利用jQuery来实现表格数据的模糊搜索功能,这对于大数据量的表格展示非常实用,用户可以通过输入关键词快速找到所需信息。 首先,我们需要了解jQuery的基本概念。...
在.NET中,我们可以使用ADO.NET或者Entity Framework等框架来实现对SQL Server 2000数据库的操作。`DBHelper`类通常会封装这些操作,如增、删、改、查的基本方法: ```csharp public static DataTable GetDataTable...
select多选下拉列表+模糊查询功能,亲测完整,有ASP和HTML样例,代码完整。 <!DOCTYPE html> <title>Insert title here</title> <script src="jquery.min.js"> <script type="text/javascript" src="jquery....
本文将深入探讨如何在SSH框架下实现增删改查(CRUD)功能,以及分页和模糊查询的技术细节。 首先,Spring框架是整个应用的中枢,它负责依赖注入(DI)和面向切面编程(AOP),提供了事务管理和其他企业级服务。...
### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中,提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...
本资源“jQuery模糊搜索表格数据代码.zip”提供了一个实用的示例,教你如何使用jQuery实现对表格数据的模糊搜索功能。这个功能在很多网页应用中都非常常见,比如数据管理界面或者用户查询系统。 首先,`index.html`...
本篇将详细介绍如何使用JavaScript库jQuery来实现表格内容的筛选功能。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理以及Ajax交互。在本示例中,我们将利用jQuery的事件监听和...
**Ajax自动补全模糊查询**是一种常见的前端交互技术,它基于JavaScript的Ajax(异步JavaScript和XML)技术,实现用户在输入框中输入文本时,系统实时从服务器端获取匹配数据并显示为下拉提示,极大地提升了用户体验...
这些文件通常包括Bootstrap的核心库、jQuery、bootstrap-table主文件,以及bootstrap-table-editable.js。确保这些资源被正确地链接或导入到HTML文档的`<head>`部分,以便在页面加载时可以正常使用。 以下是一个...
本文将深入探讨如何使用jQuery实现表格的模糊搜索功能,这在数据量较大时尤其有用,能帮助用户快速找到所需信息。 首先,我们要理解模糊搜索的基本原理。模糊搜索允许用户输入部分关键词,系统会查找包含这些关键词...
最后一个示例,jquer.zip,虽然名称有些模糊,但可以推测这可能是另一个jQuery插件或者代码示例,用于实现表头固定。通常,这样的插件会提供一个便捷的接口,使得开发者只需一行代码就能激活表头固定功能。它可能...
使用jQuery选择器找到`table`元素,然后调用`jqGrid`方法进行初始化。初始化时需要传递一个配置对象,包含表格的列定义、数据源、分页参数等。 ```javascript $("#list").jqGrid({ url: 'server.php', // 数据...
2. **动态加载**:通过Ajax实现数据的动态加载,用户可以根据需要查看更多的数据,而无需一次性加载所有记录,提高了页面性能。 3. **排序功能**:所有列都支持点击头进行排序,用户可以方便地对数据进行升序或降序...
JavaScript库,如jQuery或React,可能用于动态加载数据和实现交互功能,如筛选、排序和分页。 2. **表格组件**:高级表格通常包含复杂的过滤和排序功能。这可能涉及到使用特定的表格库,如Ag-Grid、Handsontable或...
使用 `.selectable()` 方法实现对元素的选择。 ```javascript $(document).ready(function(){ $("#myList").selectable(); }); ``` **选项** - `filter`: 指定可以选择的元素类型。 - `stop`: 结束选择时触发的...
在JavaScript开发领域,jQuery-easySearch是一款非常实用的插件,专为实现列表和表格的高效过滤搜索而设计。这款插件以其易用性、灵活性和高性能而在开发者中受到广泛欢迎。下面我们将深入探讨jQuery-easySearch的...
1. **商品展示效果**:利用`mouseenter`和`mouseleave`事件,配合CSS的`blur`滤镜,可以实现图片的模糊和恢复效果。在鼠标移入时,为图片添加模糊效果类,移出时移除该类。 2. **表格隔行变色**:通过CSS的`:nth-...
这样可以防止SQL注入攻击,同时实现模糊查询。 总结起来,在PHP中实现模糊查询并关联三个select框,主要涉及以下步骤: 1. 避免前端直接设置select的selected属性,而应在后端验证选中项的对应关系。 2. 使用第三方...