<!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>

表格排序tablesort小案列的更多相关文章

  1. 使用nosql实现页面静态化的一个小案列

    页面静态化,其实就是将动态生成的php页面,变成静态的HTML页面,让用户直接访问.有一下几方面好处: 1,首先就是访问速度,不需要去访问数据库,或者缓存来获取哪些数据,浏览器直接加载渲染html页即 ...

  2. Jquery局部刷新小案列

    /* 调用showTest()方法去后台拿到处理数据后返回到part.jsp页面,main.jsp再调用html()方法 和显示的结果集show()方法把part.jsp显示到当前的页面,实现局部页面 ...

  3. jQuery---EasyUI小案列

    jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等 ...

  4. canvas小案列-绚丽多彩的倒计时

    本次随笔中,我将实现一个绚丽的倒计时效果,这个效果主要是结合canvas和js实现的,具体代码如下 index.html文件 <!DOCTYPE html> <html> &l ...

  5. JS实现表格排序

    今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...

  6. JS表格排序

    var employees = [] employees[0] = { name: "George", age: 32, retiredate: "March 12, 2 ...

  7. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  8. 案例学习总结：原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  9. javascript 表格排序和表头浮动效果(扩展SortTable)

    前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了 ...

随机推荐

  1. HTML-参考手册: 元素和有效 DOCTYPES

    ylbtech-HTML-参考手册: 元素和有效 DOCTYPES 1.返回顶部 1. HTML 元素和有效 DOCTYPES HTML 元素 - 有效 DOCTYPES 下面的表格列出了所有的 HT ...

  2. Openstack组件实现原理 — Keystone认证功能

    目录 目录 前言 Keystone安装列表 Keystone架构 Keystone的管理对象 一个理解Keystone管理对象功能的例子 Keystone管理对象之间的关系 Keystone V3的新 ...

  3. sqlserver定时作业，定时执行存储过程

    首先,我想说,我真的是渣了,一个这个玩意弄了半天,算了,直接切入正题吧. 第一步: 先写好存储过程 用了两张表,你们自己建立吧 <br data-filtered="filtered& ...

  4. Http,Socket,TCP/IP 协议简述

    Http,Socket,TCP/IP 协议简述:https://blog.csdn.net/gordohu/article/details/54097841 TCP/IP协议,HTTP协议与webSo ...

  5. 一道面试题：js返回函数， 函数名后带多个括号的用法及join（）的注意事项

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/13/js%E8%BF%94%E5%9B%9E%E5%87%BD%E6%95%B0%E ...

  6. 用Emacs进行Java开发

    用Emacs进行Java开发 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} 用 ...

  7. Python：如何获取一个用户名的组ID

    getpwname只能得到gid一个username. import pwd myGroupId = pwd.getpwnam(username).pw_gid getgroups只能获取groups ...

  8. Python安装和使用教程（windows）

    点击进入幕布视图浏览 https://mubu.com/doc/a8VGCUfqqw 一.Python下载 1.进入Python官网:https://www.python.org/ 2.选择windo ...

  9. iView的表单table

    // html<div class="exam-list"> <Table :columns="columns7" :data="d ...

  10. vps被封逃逸_v2+cloudflare+websocket+tls+nginx

    每逢重大节日,总有那么一大部分vps凉凉,以下为能正经正常使用vps,无奈之举,此法由于多层代理,夜间速度会有影响,白天感受不明显. 由于博客园内容审查,v2_ray 中间的 下划线为分隔符,相关链接 ...