<!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. v-if-else 条件判断 是否插入元素指令

    <div id="app05"> <p v-if="OK">True的时候显示,否则不显示</p> <template ...

  2. 4K超清，2500万人在线，猫晚直播技术全解读

    摘要: 作为双11的必备节目,今年的猫晚通过优酷.浙江卫视.东方卫视进行了全程网络直播和电视直播,吸引了超过全球超过2.4亿人收看.猫晚期间,优酷基于阿里云最新的广播级高可靠直播方案,为近2500万的 ...

  3. 流量隔离方案 Dpath 护航双十一新零售

    需求 在今年的双11准备期间,业务同学提出要针对新零售进行特殊的保障,希望新零售过来的流量,单独进入到一批机器,和其他普通流量隔离开来,这对新零售系统稳定性提出更高的要求. 需求总结下来就是: 针对特 ...

  4. vue-element-admin安装失败的问题

    根据官网的介绍,从GitHub下载以后,安装依赖的时候一直不成功,试了很多办法,最终解决 先记录错误的过程: 从GitHub下载 在当前文件夹的地址栏输入 “cmd” 打开窗口 输入 npm inst ...

  5. 修改Tomcat的server.xml之后，tomcat 部署项目报错：Removing obsolete files from server... Could not clean server of obsolete files: null java.lang.NullPointerException

    介个是你在clean tomcat的时候 文件没有clean清.(临时崩溃 系统宕机或其他原因)导致自己eclipse里的service.xml 在clean时没有copy一致. 解决方案: 1找到你 ...

  6. （转）Ubuntu 12.04 下安装 Eclipse

    转:http://hi.baidu.com/sanwer/item/e5328bcdf2beaa27a1b50a0f 方法一:(缺点是安装时附加openjdk等大量程序并无法去除,优点是安装简单) $ ...

  7. 2019牛客第八场多校 D_Distance 三维BIT或定期重建套路

    目录 题意: 分析: @(2019牛客暑期多校训练营(第八场)D_Distance) 题意: 在三维空间\((n\times m\times h\le 100000)\)内,有\(q(q\le 100 ...

  8. spring mvc 使用freemark配置

    直接在配置中加入 <mvc:annotation-driven/> <!--freemark--> <bean id="freemarkerConfig&quo ...

  9. PHP面试 MySQL数据库基础

    MySQL数据库基础 MySQL数据类型 整数类型:TINYINT   SMALLINT   MEDIUMINT   INT   BIGINT 属性:UNSIGNED 长度:可以为整数类型指定宽度,列 ...

  10. Micro SQL Server2016

    Microsoft  SQL Server 2016 序列号(中英文通用) SQL Server 2016 企业版: MDCJV-3YX8N-WG89M-KV443-G8249SQL Server 2 ...