html 表格排列,html表格如何排序?表格排序详解!
p {
width: 1024px;
margin: 0 auto;
/*p相对屏幕左右居中*/
}
table {
border: solid 1px #666;
border-collapse: collapse;
width: 100%;
cursor: 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;
}
序号书名价格(元)出版时间印刷量(册)IP
1狼图腾29.802009-1050000192.168.1.1252孝心不能等待29.802009-09800192.68.1.1253藏地密码228.002008-10192.102.0.124藏地密码124.802008-10215.34.126.105设计模式之禅69.002011-12192.168.1.56轻量级 Java EE 企业应用实战99.002012-045000192.358.1.1257Java 开发实战经典79.802012-012000192.168.1.258Java Web 开发实战经典69.802011-112500215.168.54.125
$(document).ready(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所在的列号
//鼠标移除和聚焦的效果,不重要
$(this).mouseover(function() { //鼠标移开事件
tbBodyTr.each(function() { //编列tbody下的tr
var tds = $(this).find("td"); //获取列号为参数index的td对象集合
$(tds[thisIndex]).addClass("hover");
});
}).mouseout(function() { //鼠标聚焦时间
tbBodyTr.each(function() {
var tds = $(this).find("td");
$(tds[thisIndex]).removeClass("hover");
});
});
$(this).click(function() { //鼠标点击事件
var dataType = $(this).attr("type"); //获取当前点击列的 type
checkColumnValue(thisIndex, dataType); //对当前点击的列进行排序 (当前索引,排序类型)
});
});
//显示效果,不重要
$("tbody tr").removeClass(); //先移除tbody下tr的所有css类
$("tbody tr").mouseover(function() {
$(this).addClass("hover");
}).mouseout(function() {
$(this).removeClass("hover");
});
//对表格排序
function checkColumnValue(index, type) {
var trsValue = new Array(); //创建一个新的列表
tbBodyTr.each(function() { //遍历所有的tr标签
var tds = $(this).find('td'); //查找所有的 td 标签
//将当前的点击列 push 到一个新的列表中
//包括 当前行的 类型、当前索引的 值,和当前行的值
trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this)
.html());
$(this).html(""); //清空当前列
});
var len = trsValue.length; //获取所有要拍戏的列的长度
if (index == sortIndex) { //sortIndex =-1
trsValue.reverse(); //???
} else {
for (var i = 0; i
type = trsValue[i].split(".separator")[0]; // 获取要排序的类型
for (var j = i + 1; j
value1 = trsValue[i].split(".separator")[1]; //当前值
value2 = trsValue[j].split(".separator")[1]; //当前值的下一个
if (type == "number") {
//js 三元运算 如果 values1 等于 '' (空) 那么,该值就为0,否则 改值为当前值
value1 = value1 == "" ? 0 : value1;
value2 = value2 == "" ? 0 : value2;
//parseFloat() 函数可解析一个字符串,并返回一个浮点数。
//该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。
//如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。
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 {
//JavaScript localeCompare() 方法 用本地特定的顺序来比较两个字符串。
//说明比较结果的数字。
// 如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。
// 如果 stringObject 大于 target,则该方法返回大于 0 的数。
// 如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。
if (value1.localeCompare(value2) > 0) { //该方法不兼容谷歌浏览器
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
}
}
}
}
for (var i = 0; i
//将排序完的 值 插入到 表格中
//:eq(index) 匹配一个给定索引值的元素
$("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
//console.log($("tbody tr:eq(" + i + ")").html())
}
sortIndex = index;
}
//IP转成整型 ?????
function ip2int(ip) {
var num = 0;
ip = ip.split(".");
//Number() 函数把对象的值转换为数字。
num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[
3]);
return num;
}
})
html 表格排列,html表格如何排序?表格排序详解!相关推荐
- 满满干货:二分查找/排序 编程题详解
铁汁们~今天给大家分享一篇有关二分查找/排序 编程题详解(牛客网),满满干货,来吧,开造⛳️ 先给大家说些小知识点: 1.指针变量名[整数]=*(指针变量名+整数): 2.知识点:双指针 双指针指的是 ...
- JAVA中希尔排序去的讲解_java 中基本算法之希尔排序的实例详解
java 中基本算法之希尔排序的实例详解 希尔排序(Shell Sort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法.该方法因DL.Shel ...
- Java 八大排序之冒泡排序详解
Java 八大排序之冒泡排序详解 分析冒泡排序 数组[24,69,80,57,13] 第1轮排序:目标把最大数放在最后 第1 次比较:[24,69,80,57,13] 第2 次比较:[24,69,8 ...
- 七大排序算法—图文详解(插入排序,希尔排序,选择排序,堆排序,冒泡排序,快速排序,归并排序)
作者:渴望力量的土狗 博客主页:渴望力量的土狗的博客主页 专栏:数据结构与算法 工欲善其事必先利其器,给大家介绍一款超牛的斩获大厂offer利器--牛客网 点击免费注册和我一起刷题吧 目录 插入排序: ...
- 选择排序 - python实现详解
选择排序 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理如下.首先在没有排序列表中找到最小(大)元素,存放到列表的起始位置,然后,再从剩余未排序元素中继续寻找最小(大) ...
- java排序接口_详解JAVA使用Comparator接口实现自定义排序
1.原则 Comparator接口可以实现自定义排序,实现Comparator接口时,要重写compare方法: int compare(Object o1, Object o2) 返回一个基本类型的 ...
- delphi listview1添加指定列_对表格的列进行批量处理的函数详解
Table.TransformColumns Table.TransformColumns(table as table, transformOperations as list, optional ...
- 计算机表格怎么取消分页,Excel表格自动分页、取消分页等技巧 专家详解
Excel是一款功能强大的软件.利用Excel制作表格时,有时我们需要对表格进行分页打印.那么Excel表格如何自动分页.取消分页呢?下面小编为你带来解答. 工具/材料 Excel2010 操作方法 ...
- el-table表格动态合并行、合并行列及详解
- list对oracle结果集排序了_详解SQL窗口函数和分组排序函数
Mysql从8.0版本开始,也和Sql Server.Oracle一样支持在查询中使用窗口函数,本文将根据官方文档,通过实例介绍窗口函数并举例分组排序函数的使用. 英语好的大佬请移步官方文档~点我! ...
最新文章
- script标签属性sync和defer
- 1835财务报表分析
- 【数据库系统】大学模式
- div动态消失的动画效果
- C#移除HTML标记
- 烂泥:NFS做存储与KVM集成
- linux 嵌入式 人工智能,嵌入式人工智能有哪些相关技术
- Lync和Exchange 2013集成PART1:准备所需证书
- apache php mysql_PHP环境搭建(php+Apache+mysql)
- 机器学习算法汇总:人工神经网络、深度学习及其它
- python列表去重函数_对python中两种列表元素去重函数性能的比较方法
- 【转】乐观锁和悲观锁的区别
- linux 注册并配置
- webservice 视频教程 Spring+xfire 整合
- 【解决方案】Ubuntu18.04 安装L2TP及相关设置
- [转]不可不知的十部交响曲
- coap 返回版本信息_CoAP协议学习笔记
- AndroidStudio软件用法详细说明
- ubuntu安装discourse论坛----结合在apache服务上建立虚拟主机
- Nothing——for 情人节