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. 使用第三方...