jQuery 数据列表快速查询

小丑哥_V5

于 2013-05-03 21:02:29 发布

阅读量8.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java web jQuery 文章标签： Java jQuery 搜索函数 Web

本文链接：https://blog.youkuaiyun.com/shadowsick/article/details/8881892

本文通过一个简单的Demo展示了如何利用jQuery优化Web表格数据的查询。在数据量不大的情况下，通过移动符合条件的记录到首行，提高用户查看目标数据的效率。首先创建HTML表格，然后引入jQuery库，使用其提供的功能对表格行进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章摘编、转载需要注明来源 http://blog.youkuaiyun.com/shadowsick/article/details/8881892

我们的table列表一般有多条数据,如何让用户快速看到自己想看到的数据呢,这个时候再查询一次数据很明显效率不够高,我们可以尝试将符合条件的tr记录移动到首行

下面我们来做个小小的demo,估计数据量太大量的时候效果有点慢,具体调优的自行研究

先写个html加个table列表

<body style="color:#999999;">
	<input type="hidden" value="" id="searchv"/>
	<table>
		<tr><input type="text" id="search" style="width:200px;color:#cccccc;" value="可输入姓名/英文名查询" /> <a href="#" id="sub">查询</a></tr>
	</table>
	<table style="border:solid thin #cccccc">
		<thead>
			<tr>
				<td align="center" width="15%">序号</td><td align="center" width="15%">姓名</td><td align="center" width="15%">英文名</td><td align="center" width="15%">年龄</td><td align="center" width="15%">操作</td>
			&