表格排序tablesort小案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><title>tablesort表格排序</title><style>/* 自定义设置排序指示箭头 */.SortDescCss{background-image:url(Desc.gif);background-repeat:no-repeat;background-position:right center;}.SortAscCss{background-image:url(Asc.gif);background-repeat:no-repeat;background-position:right center;}</style>
</head>
<body><table border="1" cellpadding="5" cellspacing="0" id="myTable"><tr><th>序号</th><th>姓名</th><th>工号</th><th>职位</th><th>性别</th><th>业绩</th><th>报到时间</th></tr><tr><td>1</td><td>刘德华</td><td>8008</td><td>总裁</td><td>男</td><td>98</td><td>2008-04-12</td></tr><tr><td>2</td><td>吴奇隆</td><td>8004</td><td>主管</td><td>男</td><td>80</td><td>2008-04-16</td></tr><tr><td>3</td><td>王光良</td><td>8003</td><td>经理</td><td>男</td><td>85</td><td>2008-04-15</td></tr><tr><td>4</td><td>张学友</td><td>8009</td><td>副总裁</td><td>男</td><td>90</td><td>2008-04-11</td></tr><tr><td>5</td><td>张柏芝</td><td>8005</td><td>助理</td><td>女</td><td>78</td><td>2008-04-13</td></tr><tr><td>6</td><td>陈冠希</td><td>8001</td><td>总监</td><td>男</td><td>60</td><td>2008-04-18</td></tr><tr><td>7</td><td>陈慧琳</td><td>8002</td><td>试用期</td><td>女</td><td>85</td><td>2008-04-18</td></tr><tr><td>8</td><td>张曼玉</td><td>8007</td><td>高级经理</td><td>女</td><td>82</td><td>2008-04-16</td></tr><tr><td>9</td><td>周润发</td><td>8006</td><td>副总裁</td><td>男</td><td>88</td><td>2008-04-13</td></tr></table>
<br />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="tablesorter.js"></script>
<script>//点击任意表头可以排序new TableSorter("myTable");//点击0,2,5,6表头可以排序new TableSorter("myTable", 0, 2 , 5, 6);//点击表头排序并且返回提示new TableSorter("myTable").OnSorted = function(c, t){//Asc升序，Desc降序
alert("table is sorted by " + c.innerHTML + " " + (t ? "Asc" : "Desc"));}
</script>
</body>
</html>
转载于:https://www.cnblogs.com/moumou0213/p/7070766.html
表格排序tablesort小案列相关推荐
- 【5】基于VS2017的MFC平台与OpenCV4.0.1联合小案列
最近由于要做项目所以做可视化界面,在网上查询了半天时间发现大部分MFC和OpenCV联合开发的案例都是基于OpenCV3.0以前,较为新的版本较少或者制作过程不清楚.为此本人将自己查阅资料写的基于VS ...
- JavaScript背景变色小案列
一日不见,如隔三秋 我还是你们熟悉的--爱笑的陈sir 时间给勤勉的人留下智慧的力量, 给懒惰的人留下空虚和悔恨. 勤学的人,总是感到时间过得太快:懒惰的人,却总是埋怨时间跑得太慢. 今天是六一儿童节 ...
- thymeleaf案列
点击上方 Java老铁,并选择 设为星标 优质文章和资料会及时送达 1.介绍 Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发,模板引擎是一个技术名词,是跨领域跨平台的概念,在J ...
- 今日表格案列实现代码
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>新员工 ...
- 文件分段上传案列（参考b站小野森森老师的课）
文件分段上传案列 1.什么是分片上传 分片上传,就是将所要上传的文件,按照一定的大小,分割成多个块,来进行分别上传,上传完成之后再由后端进行合并,也就是不断往一个文件里append,直到合并成一个完整 ...
- 表格排序 支持汉字按拼音排序,面向对象的使用方法
周末无聊利用swapNode方法写了个排序算法,性能比较一般,超简单的冒泡排序,但是由于使用了swapNode,所以TR以及TD对象后绑定的属性不会丢失,同时解决了checkbox在swapNode后 ...
- HTML列表内容自动排序,JS实现HTML表格排序功能
本文实例为大家分享了JavaScript实现HTML表格排序功能,供大家参考,具体内容如下 HTML代码: click me click me click me click me 15.43 700 ...
- html 表格排列,html表格如何排序？表格排序详解!
表格排序 p { width: 1024px; margin: 0 auto; /*p相对屏幕左右居中*/ } table { border: solid 1px #666; border-colla ...
- excel表格排序，4种排序教程全都有
excel具备直观的界面.出色的计算功能和图表工具,其中excel可以对庞大的数据源利用排序进行快速整理,使数据一目了然并且美观,excel表格排序的具体流程是怎样的呢?小编给大家罗列了4种排序教程! ...
最新文章
- GET和POST两种基本请求方法的区别（截取自https://www.cnblogs.com/logsharing/p/8448446.html）
- mac版sublime 无法下载插件（Vue 代码无高亮问题）
- 基于CAN总线的家居安防系统设计
- 分支结构程序案例c语言,C语言学习之三——分支结构程序
- 麻省理工MIT发布首个贝叶斯「数据清洗」机器人！
- 用java代码实现九九乘法表
- java 舍_Java中BigDecimal的8种舍入模式
- 5.2 - Function Basics
- 南大电子机器人入驻云南_园区优秀企业| 中科恒清清淤机器人，以智能科技为水环境治理保驾护航...
- Spark DataFrame入门详解
- qq空间html倒计时,空间倒计时flash代码,有图
- wps公式如何加序号_神器：AxMath数学公式编辑排版软件 输入公式、化学方程式从未如此简单...
- ADB连接手机的三种方式USB、WLAN、WIFI
- 2018全球最值得关注的60家半导体公司，7家中国公司新上榜 | 年度榜单
- 微型计算机及接口技术笔记,2010年自考微型计算机及其接口技术笔记串讲
- 大二计算机学期总结报告,大二计算机的实训总结.docx
- 机器人改变生活利弊英语作文_机器人的危害英语作文
- 可解释深度学习：从感受野到深度学习的三大基本任务：图像分类，语义分割，目标检测，让你真正理解深度学习
- 【可穿戴技术】相关资料
- python爬京东延迟加载_python大规模爬取京东