JQuery 实现快速排序(不需要访问数据库)

96 阅读 0 评论 64 点赞

我是靠谱客的博主高高母鸡，这篇文章主要介绍JQuery 实现快速排序(不需要访问数据库)，现在分享给大家，希望可以做个参考。

JQuery实现的简单的排序当前页面表格行中某关键字进行快速排序:

下面是示例代码:

复制代码

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>JQuery对表格中的数据排序</title>
<script type="text/javascript" src="<%=path %>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//去掉字符串两边的空格
function trim(str) {
if(str != null && str != "undefined") {
return str.replace(/(^s*)|(s*$)/g,"");
}
}
//去掉字符串中的所有空格
function trimAll(str) {
if(str != null && str != "undefinded") {
return str.replace(/(s*)/g,"");
}
}
var tip = "请输入姓名查询";
$(document).ready(function(){
$("#queryContent").keyup(function(){
//按键触发快速查询事件
var queryContent = $(this).val().toUpperCase();
if(trim(queryContent) == "" || trim(queryContent) == tip){
return false;
}
//重新排序table中的内容;$("[name='info']") 选取所有带有name属性为'info'的元素。
$("tr[flag='info']").each(function(i){
var current = $(this).attr("name").toUpperCase();
if(current.indexOf(queryContent) != -1){
/* 选择第二个 <p>元素：$("p:eq(1)")
* 在每个 p元素之前插入span元素：$("<span>Hello world!</span>").insertBefore("p");
* 获取当前tr的第一行
*/
$(this).insertBefore($("tr[flag='info']:eq(0)"));
}
});
//重新分配样式,隔行变色
$("tr[flag='info']").each(function(i){
if(i%2 == 0){
$(this).css("background","#D8BFD8");
}else{
$(this).css("background","#ADD8E6");
}
});
}).focus(function(){
var temp = $("#queryContent").attr("value");
if(temp == tip){
$("#queryContent").attr("value","");
$("#queryContent").css("color","black");
}
}).blur(function(){
if($("#queryContent").attr("value") == ""){
$("#queryContent").attr("value",tip);
$("#queryContent").css("color","lightgray");
}
});
});
</script>
</head>
<body>
<div align="center">
<input type="text" size="20" id="queryContent" value="请输入姓名查询" style="color:lightgray"/>
<table border="1">
<tr><th>工号</th><th>姓名</th><th>性别</th><th>年龄</th><th>爱好</th></tr>
<tr flag="info" name="李天"><td>WK0001</td><td>李天</td><td>男</td><td>21</td><td>篮球,羽毛球,跑步</td></tr>
<tr flag="info" name="王晓"><td>WK0013</td><td>王晓</td><td>女</td><td>22</td><td>羽毛球,跑步,音乐,上网</td></tr>
<tr flag="info" name="张磊"><td>WK0008</td><td>张磊</td><td>男</td><td>24</td><td>篮球,网球</td></tr>
<tr flag="info" name="齐晓天"><td>WK0009</td><td>齐晓天</td><td>男</td><td>25</td><td>上网</td></tr>
<tr flag="info" name="孙飞"><td>WK0003</td><td>孙飞</td><td>男</td><td>24</td><td>上网,音乐,跑步</td></tr>
<tr flag="info" name="王新宇"><td>WK0007</td><td>王新宇</td><td>男</td><td>23</td><td>篮球,羽毛球,上网</td></tr>
<tr flag="info" name="赵玉亮"><td>WK0002</td><td>赵玉亮</td><td>男</td><td>24</td><td>读书,音乐</td></tr>
<tr flag="info" name="田晓亮"><td>WK0012</td><td>田晓亮</td><td>男</td><td>25</td><td>音乐,羽毛球,跑步</td></tr>
<tr flag="info" name="王菲"><td>WK0011</td><td>王菲</td><td>女</td><td>21</td><td>篮球,羽毛球,跑步</td></tr>
<tr flag="info" name="宋天宇"><td>WK0004</td><td>宋天宇</td><td>男</td><td>28</td><td>篮球,上网,跑步</td></tr>
<tr flag="info" name="周伟良"><td>WK0006</td><td>周伟良</td><td>男</td><td>34</td><td>读书,羽毛球,乒乓球</td></tr>
<tr flag="info" name="邓晓天"><td>WK0010</td><td>邓晓天</td><td>男</td><td>24</td><td>篮球,羽毛球,跑步</td></tr>
<tr flag="info" name="王丽"><td>WK0005</td><td>王丽</td><td>女</td><td>28</td><td>篮球,音乐</td></tr>
</table>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>JQuery对表格中的数据排序</title>
<script type="text/javascript" src="<%=path %>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//去掉字符串两边的空格
function trim(str) {
if(str != null && str != "undefined") {
return str.replace(/(^s*)|(s*$)/g,"");
}
}
//去掉字符串中的所有空格
function trimAll(str) {
if(str != null && str != "undefinded") {
return str.replace(/(s*)/g,"");
}
}
var tip = "请输入姓名查询";
$(document).ready(function(){
$("#queryContent").keyup(function(){
//按键触发快速查询事件
var queryContent = $(this).val().toUpperCase();
if(trim(queryContent) == "" || trim(queryContent) == tip){
return false;
}
//重新排序table中的内容;$("[name='info']") 选取所有带有name属性为'info'的元素。
$("tr[flag='info']").each(function(i){
var current = $(this).attr("name").toUpperCase();
if(current.indexOf(queryContent) != -1){
/* 选择第二个 <p>元素：$("p:eq(1)")
* 在每个 p元素之前插入span元素：$("<span>Hello world!</span>").insertBefore("p");
* 获取当前tr的第一行
*/
$(this).insertBefore($("tr[flag='info']:eq(0)"));
}
});
//重新分配样式,隔行变色
$("tr[flag='info']").each(function(i){
if(i%2 == 0){
$(this).css("background","#D8BFD8");
}else{
$(this).css("background","#ADD8E6");
}
});
}).focus(function(){
var temp = $("#queryContent").attr("value");
if(temp == tip){
$("#queryContent").attr("value","");
$("#queryContent").css("color","black");
}
}).blur(function(){
if($("#queryContent").attr("value") == ""){
$("#queryContent").attr("value",tip);
$("#queryContent").css("color","lightgray");
}
});
});
</script>
</head>
<body>
<div align="center">
<input type="text" size="20" id="queryContent" value="请输入姓名查询" style="color:lightgray"/>
<table border="1">
<tr><th>工号</th><th>姓名</th><th>性别</th><th>年龄</th><th>爱好</th></tr>
<tr flag="info" name="李天"><td>WK0001</td><td>李天</td><td>男</td><td>21</td><td>篮球,羽毛球,跑步</td></tr>
<tr flag="info" name="王晓"><td>WK0013</td><td>王晓</td><td>女</td><td>22</td><td>羽毛球,跑步,音乐,上网</td></tr>
<tr flag="info" name="张磊"><td>WK0008</td><td>张磊</td><td>男</td><td>24</td><td>篮球,网球</td></tr>
<tr flag="info" name="齐晓天"><td>WK0009</td><td>齐晓天</td><td>男</td><td>25</td><td>上网</td></tr>
<tr flag="info" name="孙飞"><td>WK0003</td><td>孙飞</td><td>男</td><td>24</td><td>上网,音乐,跑步</td></tr>
<tr flag="info" name="王新宇"><td>WK0007</td><td>王新宇</td><td>男</td><td>23</td><td>篮球,羽毛球,上网</td></tr>
<tr flag="info" name="赵玉亮"><td>WK0002</td><td>赵玉亮</td><td>男</td><td>24</td><td>读书,音乐</td></tr>
<tr flag="info" name="田晓亮"><td>WK0012</td><td>田晓亮</td><td>男</td><td>25</td><td>音乐,羽毛球,跑步</td></tr>
<tr flag="info" name="王菲"><td>WK0011</td><td>王菲</td><td>女</td><td>21</td><td>篮球,羽毛球,跑步</td></tr>
<tr flag="info" name="宋天宇"><td>WK0004</td><td>宋天宇</td><td>男</td><td>28</td><td>篮球,上网,跑步</td></tr>
<tr flag="info" name="周伟良"><td>WK0006</td><td>周伟良</td><td>男</td><td>34</td><td>读书,羽毛球,乒乓球</td></tr>
<tr flag="info" name="邓晓天"><td>WK0010</td><td>邓晓天</td><td>男</td><td>24</td><td>篮球,羽毛球,跑步</td></tr>
<tr flag="info" name="王丽"><td>WK0005</td><td>王丽</td><td>女</td><td>28</td><td>篮球,音乐</td></tr>
</table>
</div>
</body>
</html>