实现功能：

通过点击表头某个字段，实现内容的升序或降序排序。

效果如下：

完整代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>

    <style media="screen">

        table {

            border-collapse: collapse;

            border-color: rgba(205, 193, 222, 0.84);

        }

    </style>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>

                    &nbsp;编号&nbsp;

                </th>

                <th>

                    &nbsp;语言&nbsp;

                </th>

                <th>

                    &nbsp;课时&nbsp;

                </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>c001</td>

                <td>c#</td>

                <td>80</td>

            </tr>

            <tr>

                <td>c002</td>

                <td>Java</td>

                <td>70</td>

            </tr>

            <tr>

                <td>c003</td>

                <td>PHP</td>

                <td>60</td>

            </tr>

            <tr>

                <td>c004</td>

                <td>Perl</td>

                <td>50</td>

            </tr>

        </tbody>

    </table>

   <script>

        $(document).ready(function() {

            var sort_direction=1; //排序标志，1为升序，-1为降序

            $('th').each(function(i) {

                $(this).click(function() {

                    if(sort_direction==1) {

                        sort_direction=-1;

                    }

                    else {

                        sort_direction=1;

                    }

                    //获得行数组

                    var trarr=$('table').find('tbody > tr').get();

                    //数组排序

                    trarr.sort(function(a, b) {

                        var col1=$(a).children('td').eq(i).text().toUpperCase();

                        var col2=$(b).children('td').eq(i).text().toUpperCase();

                        return(col1 < col2) ? -sort_direction: (col1 > col2) ? sort_direction: 0;

                        //返回-1表示a>b降序,返回1表示a<b升序,否则为0相等

                        /*

                         * if (col1 > col2) {

                            return sort_direction;

                        }else if(col1 <col2){

                            return -sort_direction;

                        }else{

                            return 0;

                        }*/

                    }

                    );

                    $.each(trarr, function(i, row) {

                        //将排好序的数组重新填回表格

                        $('tbody').append(row);

                    }

                    );

                }

                );

            }

            );

        }

    );

    </script>

</body>

</html>

【Demo】jQuery 表格内容动态排序的更多相关文章

  1. jquery 表格排序，实时搜索表格内容

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> < ...

  2. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  3. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

  4. jQuery代码实现表格内容可编辑修改

    1.效果及功能说明 表格特效制作jquery表格可编辑任意修改里面的数值,是一种比较人性化的用户设计体验方式 2.实现原理 通过点击事件来触发跳出一个输入框可以在里面输入当这个输入框失去焦点后就把,所 ...

  5. jquery动态表格，动态添加表格行

    转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图:   Html:<html> &l ...

  6. js实现前端动态筛选表格内容

    代码参考: http://www.sharejs.com/codes/javascript/4289 http://www.jb51.net/article/103420.htm https://ww ...

  7. 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值

    首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...

  8. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. 推荐几款jQuery表格插件

    平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...

随机推荐

  1. PAT 1120 Friend Numbers[简单]

    1120 Friend Numbers (20 分) Two integers are called "friend numbers" if they share the same ...

  2. vultr服务器上搭建PHP运行环境-centos7

    安装nginx: yum install nginx 开启Nginx systemctl start nginx 访问你的域名或者ip 例如:quantaedu.com 安装PHP 查看系统版本lsb ...

  3. dubbo总结

     一 .Dubbo产生背景 单一应用架构当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.此时,用于简化增删改查工作量的 数据访问框架(ORM) 是关键. 垂直应用架构当访 ...

  4. Linux 磁盘

    一台物理服务器通常有好几块磁盘(/dev/sda,/dev/sdb),每个磁盘上都可以进行分区(例如对sda进行分区操作:fdisk /dev/sda,可以将sda分成sda1,sda2,sda5等分 ...

  5. docker issue-Cannot connect to the Docker daemon. Is 'docker -d' running on this host?

    Here is my docker version when i run docker version : Client: Version: 1.8.1 API version: 1.20 Go ve ...

  6. 服务器抓包命令：tcpdump详解

    官网地址:http://www.tcpdump.org/tcpdump_man.html 简介: tcpdump,就是:dump the traffic on a network,根据使用者的定义对网 ...

  7. Mysql主从架构报错-Fatal error: The slave I/O thread stops because master and slave have equal MySQL server UUIDs; these UUIDs must be different for replication to work...

    在搭建Mysql主从架构过程中,由于从服务器是克隆的主服务器系统,导致主从mysql uuid相同, Slave_IO无法启动,报错如下: The slave I/O thread stops bec ...

  8. 20145327 《Java程序设计》第十周学习总结

    20145327 <Java程序设计>第十周学习总结 教材学习内容总结 网络编程就是运行在不同计算机中两个程序之间的数据交换. 网络中的每个设备都会有一个唯一的数字标识,这个就是IP地址. ...

  9. 20145335郝昊《java程序设计》第2次实验报告

    20145335郝昊<java程序设计>第2次实验报告 实验名称 Java面向程序设计,采用TDD的方式设计有关实现复数类Complex. 理解并掌握面向对象三要素:封装.继承.多态. 运 ...

  10. Redis中RedisTemplate和Redisson管道的使用

    当对Redis进行高频次的命令发送时,由于网络IO的原因,会耗去大量的时间.所以Redis提供了管道技术,就是将命令一次性批量的发送给Redis,从而减少IO. 一.Jedis对redis的管道进行操 ...