and排序 jquery jquery 表格排序

转载

小屁孩 2023-11-22 22:15:41

文章标签 and排序 jquery html jQuery jquery 文章分类 jQuery 前端开发

用jQuery实现表格排序

参考：
方法一：
方法二：
方法一和方法二差不多，主要是排序函数的设置不一样
本文参考方法一
思路
①鼠标在表头按下，获取表头的列值，index
var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号 ~
②创建arrayarray var trsValue = new Array(); ~
③each遍历每一行，push进array
~
④放入某个数组的string分为三个部分，（type，记录string还是int）（作为排序依据的该行的目的单元格元素，在该行内通过之前获取的index 进行索引）（该行全部内容），这三个部分用标记符separator隔开，方便之后的分割，关键代码如下：
trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html()); ~
⑤根据每一行的分割内容进行排序（这里采用的是冒泡排序）
首先获取type，方便不同类型的排序type = trsValue[i].split(".separator")[0]; 获取排序依据单元格value1 = trsValue[i].split(".separator")[1]; 数字类：parseFloat string类：localeCompare 排序过程中：trsValue[j] = trsValue[i];进行整行的交换数据（把type、排序依据的单元格、整行数据）
~
⑥最后按行输出$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]); ~
⑦表格内变色效果，通过mouseover和addClass("hover")和removeClass("hover") ~
完整代码如下
（如果想css、html、js分开看，可以看原链接）
（代码中标记了自己理解的注释）

<!DOCTYPE html>
<html>
	<head>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
            
        <style type="text/css">
                div
                {
                    width: 1024px;
                    margin: 0 auto; /*div相对屏幕左右居中*/
                }
                table
                {
                    border: solid 1px #666;
                    border-collapse: collapse;
                    width: 100%;
                    cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标（通常是一个箭头）*/
                }
                tr
                {
                    border: solid 1px #666;
                    height: 30px;
                }
                table thead tr
                {
                    background-color: #ccc;
                }
                td
                {
                    border: solid 1px #666;
                }
                th
                {
                    border: solid 1px #666;
                    text-align: center;
                    cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/
                }
                .sequence
                {
                    text-align: center;
                }
                .hover
                {
                    background-color: #3399FF;
                }
        </style>
    </head>
	<body>
		<div>
        <table id="tableSort">
            <thead>
                <tr>
                    <th type="number">
                        序号
                    </th>
                    <th type="string">
                        书名
                    </th>
                    <th type="number">
                        价格（元）
                    </th>
                    <th type="string">
                        出版时间
                    </th>
                    <th type="number">
                        印刷量（册）
                    </th>
                    <th type="ip">
                        IP
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover">
                    <td class="sequence">
                        1
                    </td>
                    <td>
                        狼图腾
                    </td>
                    <td>
                        29.80
                    </td>
                    <td>
                        2009-10
                    </td>
                    <td>
                        50000
                    </td>
                    <td>
                        192.168.1.125
                    </td>
                </tr>
                <tr>
                    <td class="sequence">
                        2
                    </td>
                    <td>
                        孝心不能等待
                    </td>
                    <td>
                        29.80
                    </td>
                    <td>
                        2009-09
                    </td>
                    <td>
                        800
                    </td>
                    <td>
                        192.68.1.125
                    </td>
                </tr>
                <tr>
                    <td class="sequence">
                        3
                    </td>
                    <td>
                        藏地密码2
                    </td>
                    <td>
                        28.00
                    </td>
                    <td>
                        2008-10
                    </td>
                    <td>
                    </td>
                    <td>
                        192.102.0.12
                    </td>
                </tr>
                <tr>
                    <td class="sequence">
                        4
                    </td>
                    <td>
                        藏地密码1
                    </td>
                    <td>
                        24.80
                    </td>
                    <td>
                        2008-10
                    </td>
                    <td>
                    </td>
                    <td>
                        215.34.126.10
                    </td>
                </tr>
                <tr>
                    <td class="sequence">
                        5
                    </td>
                    <td>
                        设计模式之禅
                    </td>
                    <td>
                        69.00
                    </td>
                    <td>
                        2011-12
                    </td>
                    <td>
                    </td>
                    <td>
                        192.168.1.5
                    </td>
                </tr>
                <tr>
                    <td class="sequence">
                        6
                    </td>
                    <td>
                        轻量级 Java EE 企业应用实战
                    </td>
                    <td>
                        99.00
                    </td>
                    <td>
                        2012-04
                    </td>
                    <td>
                        5000
                    </td>
                    <td>
                        192.358.1.125
                    </td>
                </tr>
                <tr>
                    <td class="sequence">
                        7
                    </td>
                    <td>
                        Java 开发实战经典
                    </td>
                    <td>
                        79.80
                    </td>
                    <td>
                        2012-01
                    </td>
                    <td>
                        2000
                    </td>
                    <td>
                        192.168.1.25
                    </td>
                </tr>
                <tr>
                    <td class="sequence" οnclick="sortArray()">
                        8
                    </td>
                    <td>
                        Java Web 开发实战经典
                    </td>
                    <td>
                        69.80
                    </td>
                    <td>
                        2011-11
                    </td>
                    <td>
                        2500
                    </td>
                    <td>
                        215.168.54.125
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
   
   <script type="text/javascript">
        $(function () {
            var tableObject = $('#tableSort'); //获取id为tableSort的table对象
            var tbHead = tableObject.children('thead'); //获取table对象下的thead
            var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th
            var tbBody = tableObject.children('tbody'); //获取table对象下的tbody
            var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr
 
            var sortIndex = -1;
 
            tbHeadTh.each(function () {//遍历thead的tr下的th
                var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号
                //给表态th增加鼠标位于上方时发生的事件
                $(this).mouseover(function () {
                    tbBodyTr.each(function () {//编列tbody下的tr
                        var tds = $(this).find("td"); //获取列号为参数index的td对象集合
                        $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式
                    });
                }).mouseout(function () {//给表头th增加鼠标离开时的事件
                    tbBodyTr.each(function () {
                        var tds = $(this).find("td");
                        $(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式
                    });
                });
 
                $(this).click(function () {//给当前表头th增加点击事件
                    var dataType = $(this).attr("type");//点击时获取当前th的type属性值
                    checkColumnValue(thisIndex, dataType);
                });
            });
 
            $("tbody tr").removeClass(); //先移除tbody下tr的所有css类
            //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色
            $("tbody tr").mouseover(function () {
                $(this).addClass("hover");
            }).mouseout(function () {
                $(this).removeClass("hover");
            });
 
            //对表格排序
            function checkColumnValue(index, type) {
                var trsValue = new Array();
 
                tbBodyTr.each(function () {
                    //按照每一行遍历
                    var tds = $(this).find('td');
                    //获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中
                    //index是形参，实参是th所在的列号thisIndex
                    //gu理解：类似爬虫的正则化，以获取其中内容
                    //gu理解：感觉这是一种字符串的写法，之后指定这是按照.separator进行分割 
                    //gu理解：以array形式存储，每次push进新元素，新元素是string
                    //gu理解：分割开获取的东西分别是 type(string/numbei/ip)、这一列的该行元素、该行所有内容                 
                    trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
                    $(this).html("");
                });
 
                var len = trsValue.length;
 
                if (index == sortIndex) {
                //如果已经排序了则直接倒序
                    trsValue.reverse();
                } else {
                    for (var i = 0; i < len; i++) {
                        //split() 方法用于把一个字符串分割成字符串数组
                        //获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip
                        //gu理解：之前以.separator存储，现在以此分割
                        //gu理解：IP应该是该行所有内容
                        //gu理解：i是遍历所以行（每行存储在一个array里）、[0]应该是指截取出来的第一个元素
                        type = trsValue[i].split(".separator")[0];
                        for (var j = i + 1; j < len; j++) {
                            //获取每行分割后数组的第二个值,即文本值
                            value1 = trsValue[i].split(".separator")[1];
                            //获取下一行分割后数组的第二个值,即文本值
                            value2 = trsValue[j].split(".separator")[1];
                            //接下来是数字\字符串等的比较
                            if (type == "number") {
                                //gu：若为空，则对其赋值为0，方便排序
                                value1 = value1 == "" ? 0 : value1;
                                value2 = value2 == "" ? 0 : value2;
                                //gu:parseFloat将原来以string放入的内容解析为数字
                                if (parseFloat(value1) > parseFloat(value2)) {
                                    var temp = trsValue[j];
                                    trsValue[j] = trsValue[i];
                                    trsValue[i] = temp;
                                }
                            } else if (type == "ip") {
                                //gu:ip2int函数在下方定义，是一个
                                if (ip2int(value1) > ip2int(value2)) {
                                    var temp = trsValue[j];
                                    trsValue[j] = trsValue[i];
                                    trsValue[i] = temp;
                                }
                            } else {
                                //gu:当type为string时
                                if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器
                                    var temp = trsValue[j];
                                    trsValue[j] = trsValue[i];
                                    trsValue[i] = temp;
                                }
                            }
                        }
                    }
                }
 
                //gu:之前len记录了向trsValue push进多少东西
                for (var i = 0; i < len; i++) {
                    //gu:tbody下 第i+1 个 tr （因为i是从0开始的，即index=i）
                    //gu:指定其中的内容用 分割 后的第二个内容代替（即该行全部内容）
                    //gu：排序过程中 trsValue[j] = trsValue[i]; 所以直接输出即可
                    $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
                }
 
                sortIndex = index;
            }
 
            //IP转成整型
            function ip2int(ip) {
                var num = 0;
                ip = ip.split(".");
                num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
                return num;
            }
 
        })
    </script>

	</body>

</html>

详解

行245

jQuery each() 方法

each() 方法为每个匹配元素规定要运行的函数。

语法:
$(selector).each(function(index,element))

function(index,element)	必需。为每个匹配元素规定运行的函数。
index - 选择器的 index 位置。
element - 当前的元素（也可使用 "this" 选择器）。

Example1:
$("li").each(function(){
	 alert($(this).text())
});


Example2:
tbBodyTr.each(function () {//编列tbody下的tr
    var tds = $(this).find("td"); //获取列号为参数index的td对象集合
    $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式
});

Example3:
tbHeadTh.each(function () {//遍历thead的tr下的th

行246

index

index(),去获取元素的下标
《$ (obj).index(this)与$(this).index()异同讲解》

jquery中的this与 $ (this)的区别总结

（this：html元素）（$(this)：JQuery对象）

行287

trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());

JavaScript push() 方法

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

注意： 新元素将添加在数组的末尾。
注意： 此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")

jQuery html() 方法

html() 方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。

返回内容：
$(selector).html()

设置内容：
$(selector).html(content)

使用函数设置内容：
$(selector).html(function(index,currentcontent))

$(this).html("");
清空该元素的html内容
如果不加的话，每弹出一次对话框。里面的提示内容会重复增加，
加上的作用就是为了清除当前元素的内容

行303

type = trsValue[i].split(".separator")[0];

JavaScript split() 方法

split() 方法用于把一个字符串分割成字符串数组

语法
stringObject.split(separator,howmany)

参数
separator  必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany	   可选。该参数可指定返回的数组的最大长度。
           如果设置了该参数，返回的子串不会多于这个参数指定的数组。
           如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

提示：
如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

Example1：
把单词分割为字母，或者把字符串分割为字符：
"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]
若只需要返回一部分字符，可使用 howmany 参数：
"hello".split("", 3)	//可返回 ["h", "e", "l"]

Example2：
var str="How are you doing today?"
str.split(" ")//返回：How,are,you,doing,today?
str.split("")//返回：H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
str.split(" ",3)//返回：How,are,you

Example3：
"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

行312

value1 = value1 == "" ? 0 : value1;

js条件运算符

语法：
变量 = (条件) ? 值1:值2

如果条件为 truthy ，则 变量=值1
如果条件为 falsy  ，则 变量=值2

行315

if (parseFloat(value1) > parseFloat(value2)) {

JavaScript parseFloat() 函数

parseFloat() 函数可解析一个字符串，并返回一个浮点数。

语法
parseFloat(string)

Example：
<script type="text/javascript">
	document.write(parseFloat("10")) 
	document.write(parseFloat("10.00")) 
	document.write(parseFloat("10.33")) 
	document.write(parseFloat("34 45 66")) 
	document.write(parseFloat(" 60 ")) 
	document.write(parseFloat("40 years"))
	document.write(parseFloat("He was 40"))
</script>

输出：
10
10
10.33
34
60
40
NaN

行329

if (value1.localeCompare(value2) > 0)

JavaScript localeCompare() 方法

用本地特定的顺序来比较两个字符串。

语法
stringObject.localeCompare(target)

说明
比较结果的数字
如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。
如果 stringObject 大于 target，则该方法返回大于 0 的数。
如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。

行344

$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);

jQuery :eq() 选择器

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素

语法
$(":eq(index)")

例：
$("p:eq(1)").css("background-color","#B2E0FF");

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：R语言ggplot2 把y轴翻转 r语言ggplot2作图

下一篇：ios 中内省 iphone怎么设置省内存

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

and排序 jquery jquery 表格排序

and排序 jquery jquery 表格排序

目录

用jQuery实现表格排序

详解

行245

jQuery each() 方法

行246

index

jquery中的this与 $ (this)的区别总结

行287

JavaScript push() 方法

jQuery html() 方法

行303

JavaScript split() 方法

行312

js条件运算符

行315

JavaScript parseFloat() 函数

行329

JavaScript localeCompare() 方法

行344

jQuery :eq() 选择器

51CTO博客

and排序 jquery jquery 表格 排序

and排序 jquery jquery 表格 排序

目录

用jQuery实现表格排序

详解

行245

jQuery each() 方法

行246

index

jquery中的this与 $ (this)的区别总结

行287

JavaScript push() 方法

jQuery html() 方法

行303

JavaScript split() 方法

行312

js条件运算符

行315

JavaScript parseFloat() 函数

行329

JavaScript localeCompare() 方法

行344

jQuery :eq() 选择器

51CTO博客

and排序 jquery jquery 表格排序

and排序 jquery jquery 表格排序