实现功能：

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

效果如下：

完整代码：

<!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. C++ 对象的sizeof问题

    需要补充.. 1. 注意虚函数的指针占4个字节.(当然是32位机器) #include <cstdlib> #include <ctime> #include <iost ...

  2. td中不包含汉字的字符串不换行，包含汉字的能换行的问题原因及解决方法

    今天项目中遇到一个问题,一长串的字符串如:003403FF0014E54016030CC655BC3242,但是如:中国河北省石家庄市裕华区槐安路雅清街交口 这样的就可以换行. 原因是:英文字母之间如 ...

  3. Visual studio插件 Reshaper--- 常用快捷键

    快速修复 alt+enter (alt+enter唤出快速修复面板,上下方向键进行选择,再次敲击enter键确定修改) 跳转到对象声明 ctl+鼠标左键 重构-重命名(ctl+r+r) esc键退出 ...

  4. Linux远程管理器xshell和xftp使用教程，以及遇到关闭Xshell后项目也停止的解决方法

    1.xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议. 2.是一个基于 MS windows 平台的功能强大的 ...

  5. LeetCode (236):Lowest Common Ancestor of a Binary Search Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  6. 蓝桥杯练习——C++输出阶乘的最右边一位非零数

    #include<iostream> #include<iomanip> using namespace std; #define M 10000 #define N 1000 ...

  7. MyBatis如何返回自增的ID

    <insert id="insertTable" parameterType="com.infohold.city.map.model.CheckTemplateM ...

  8. Scrapyd 项目爬虫部署

    scrapyd是一个用于部署和运行scrapy爬虫的程序,它允许你通过JSON API来部署爬虫项目和控制爬虫运行 scrapyd是一个守护进程,监听爬虫的运行和请求,然后启动进程来执行它们 安装扩展 ...

  9. iOS开发值得学习的Demo

    一.HXWeiboPhotoPicker - 仿微博照片选择器 GitHub地址:https://github.com/LoveZYForever/HXWeiboPhotoPicker 二.AFNet ...

  10. JS输出表格头上的文字内容

    Array.from(document.querySelectorAll("#tb1 tr .cell")).map(it=>it.innerText)