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

最新推荐文章于 2022-01-17 09:23:29 发布

South-Fly

最新推荐文章于 2022-01-17 09:23:29 发布

阅读量1.3k

点赞数

分类专栏： JavaWEB JavaScript 前端技术

本文链接：https://blog.csdn.net/sunlovefly2012/article/details/8941681

版权

JavaScript 同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

前端技术

27 篇文章 0 订阅

订阅专栏

JavaWEB

9 篇文章 0 订阅

订阅专栏

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>