html表格td向下排序,jquery实现的table排序功能示例
本文实例讲述了jquery实现的table排序功能。分享给大家供大家参考,具体如下:
Document
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;
}
$(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中
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
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") {
value1 = value1 == "" ? 0 : value1;
value2 = value2 == "" ? 0 : value2;
if (parseFloat(value1) > parseFloat(value2)) {
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
} else if (type == "ip") {
if (ip2int(value1) > ip2int(value2)) {
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
} else {
if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
}
}
}
}
for (var i = 0; i < len; 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;
}
})
序号
书名
价格(元)
出版时间
印刷量(册)
IP
1
狼图腾
29.80
2009-10
50000
192.168.1.125
2
孝心不能等待
29.80
2009-09
800
192.68.1.125
3
藏地密码2
28.00
2008-10
192.102.0.12
4
藏地密码1
24.80
2008-10
215.34.126.10
5
设计模式之禅
69.00
2011-12
192.168.1.5
6
轻量级 Java EE 企业应用实战
99.00
2012-04
5000
192.358.1.125
7
Java 开发实战经典
79.80
2012-01
2000
192.168.1.25
8
Java Web 开发实战经典
69.80
2011-11
2500
215.168.54.125
运行效果图如下:
希望本文所述对大家jQuery程序设计有所帮助。
html表格td向下排序,jquery实现的table排序功能示例相关推荐
- php table字段排序,jQuery如何对table进行排序操作的示例详解
这篇文章主要介绍了jquery对table做排序操作的实例演示,通过添加自定义属性data-sort-field-ftime及表头添加onchange事件详细讲解了操作过程,需要的朋友可以参考下 最近 ...
- php购票排位_PHP基于双向链表与排序操作实现的会员排名功能示例
本文实例讲述了PHP基于双向链表与排序操作实现的会员排名功能.分享给大家供大家参考,具体如下: 双向链表也叫双链表,是链表的一种,它的每个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双 ...
- 强大Jquery插件,table排序之二
上次那个排序很炫,但是很不实用,对于大数据量的排序就会很慢,甚至浏览器死掉 这次找了个tablesorter 比那个效率好很多,很实用的说 还可以做分页,very nice 转载于:https://w ...
- ajax实现搜索提示源码,Jquery实现搜索框提示功能示例代码
博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数 ...
- td 内容自动换行 table表格td设置宽度后自动换行
td 内容自动换行 table表格td设置宽度后自动换行 控制样式 table { table-layout:fixed; WORD-BREAK:break-all; } td { word-wrap ...
- html在表格添加下拉按钮,Bootstrap-table 使用说明--如何在表格td里增加一个按钮
如何在表格td里增加一个按钮:如何在列表操作列区域添加按钮 初始化表格 table.bootstrapTable -->columns 增加: { field: 'operate', title ...
- html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号 捆包号 品名 规格 材质 重量 业务需求是,从后台获取到订单 ...
- 表格排序 支持汉字按拼音排序,面向对象的使用方法
周末无聊利用swapNode方法写了个排序算法,性能比较一般,超简单的冒泡排序,但是由于使用了swapNode,所以TR以及TD对象后绑定的属性不会丢失,同时解决了checkbox在swapNode后 ...
- html表格行列变化插件,利用jQuery实现HTML 表格行列冻结
摘要:行列冻结是处理表格非常常见的应用,我们都知道用excel可以很轻松的实现这一功能.但html编写的web网页表格中并没有冻结表格这一功能,那又要如何才能实现表格的 行 列 冻结呢? 行列冻结是处 ...
最新文章
- 在Ubuntu 16.04.3 LTS上玩转QUIC开源项目proto-quic
- 【Vegas原创】SQL Sever系统表及系统procedure的总结
- C#入门篇5-6:流程控制语句 foreach
- 《机器学习与R语言(原书第2版)》一2.3 探索和理解数据
- IOS开发学习记录第2天之熟悉Xcode常用快捷键
- 【解决bug之路】JAVA 之 static
- Oracle入门(五E)之讲解show parameter命令模糊查询
- 使用ANTLR在5分钟内用Java解析任何语言:例如Python
- 『TensorFlow』模型保存和载入方法汇总
- 机试指南第二章-经典入门-查找例题自解
- 如何修改mysql物理文件存放地址_如何防封号物理地址和网络地址修改攻略
- 【LeetCode】剑指 Offer 65. 不用加减乘除做加法
- android.os.NetworkOnMainThreadException问题
- JS助记 ----- 正则表达式
- 博客主之自我介绍(不长,随便瞅瞅)
- 解决异常MySQLNonTransientConnectionException: Communications link failure during rollback().
- 空间数据挖掘与空间大数据的探索与思考(五)
- javascript中function前面加(/!/+/-/~的含义
- VSCode Remote SSH 过程试图写入的管道不存在
- shell的字符串截取