使用 JQuery 实现将 table 按照列排序

代码如下

<!DOCTYPE html>

<html>

<head>

    <title>如何使用js使table按照表头排序</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>

<body>

    <div style="text-align: center;margin: 10px;">

        <button type="button" style="width: 200px;" class="btn btn-outline-danger">按照表头排序</button>

    </div>

    <table class="table table-hover" style="width: 80%;text-align:center;margin: 0 auto;border: 0;" id="sorttable">

        <thead class="thead-dark">

            <tr>

                <th>Fri</th>

                <th>Thu</th>

                <th>Wed</th>

                <th>Tue</th>

                <th>Mon</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>5</td>

                <td>4</td>

                <td>3</td>

                <td>2</td>

                <td>1</td>

            </tr>

            <tr>

                <td>5</td>

                <td>4</td>

                <td>3</td>

                <td>2</td>

                <td>1</td>

            </tr>

            <tr>

                <td>5</td>

                <td>4</td>

                <td>3</td>

                <td>2</td>

                <td>1</td>

            </tr>

            <tr>

                <td>5</td>

                <td>4</td>

                <td>3</td>

                <td>2</td>

                <td>1</td>

            </tr>

            <tr>

                <td>5</td>

                <td>4</td>

                <td>3</td>

                <td>2</td>

                <td>1</td>

            </tr>

        </tbody>

    </table>

</body>

<script type="text/javascript">

jQuery.fn.swapWith = function(to) {

    return this.each(function() {

        var copy_to = $(to).clone(true);

        var copy_from = $(this).clone(true);

        $(to).replaceWith(copy_from);

        $(this).replaceWith(copy_to);

    });

};

jQuery.moveColumn = function(table, from, to) {

    var rows = jQuery('tr', table);

    var cols;

    rows.each(function() {

        cols = jQuery(this).children('th, td');

        cols.eq(from).swapWith(cols.eq(to));

    });

};

$(function() {

    $("button").click(function() {

        var tbl = $("#sorttable");

        $('#sorttable tr').eq(0).each(function(i) { // 遍历 tr

            var length = $(this).find('th').length;

            for (var i = 0; i < length / 2; i++) {

                jQuery.moveColumn(tbl, i, length - i - 1);

            }

        });

    });

});

</script>

</html>

未排序前

排序后

参考资料

使用 JQuery 实现将 table 按照列排序的更多相关文章

  1. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  2. jquery的DataTable按列排序

    不管你用SQL查询数据时,是如何排序的,当数据传递给DataTable时,它会按照它自己的规则再进行一次排序,这个规则就是"order" 可以使用以下代码来进行排序 $('#exa ...

  3. Jtable 表格按多列排序（支持中文汉字排序）

    这两天公司让做一个Jtable表格的排序,首先按A列排序,在A列相等时按B列排序,B列相等时按C列排序,ABC三列可以任意指定,最多分三列,这样的一个需求.由于我是大神,所以必须做了出来.ok,不自恋 ...

  4. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  5. 非常强大的table根据表头排序,点击表头名称,对其内容排序

    js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...

  6. iot表输出按主键列排序,heap表不是

    <pre name="code" class="html"> create table t1 (id char(10) primary key,a1 ...

  7. BootstrapTable的列排序怎么搞

    1.BootstrapTable的列排序怎么搞. 先搞一个table,使用ajax将数据查询出来,然后可以在所有列都加上排序.满足自己的需求. data-sortable="true&quo ...

  8. 【变态需求】bootstrapTable列排序-选择正序倒序不排序

    产品经理:那个table排序能不能点击后弹个选项选择正序倒序不排序? -- 那个是bootstrapTable的插件!不支持!改不了!! 注意:数据上假的,效果看http请求参数进行脑补 这是boot ...

  9. js&jquery获取指定table指定行里面的内容

      js&jquery获取指定table指定行里面的内容 CreateTime--2018年5月18日11:46:04 Author:Marydon 1.展示 代码展示 <table s ...

随机推荐

  1. 搭建Elasticsearch5.6.8 分布式集群

    集群搭建 1.master[192.168.101.175] 配置elasticsearch.yml #集群名称 所有节点要相同 cluster.name: my-application #本节点名称 ...

  2. Tool1—安装配置Windows Live Writer

    详细步骤请看:http://home.cnblogs.com/group/topic/8550.html . Windows Live Writer手工配置步骤(在博客园配置时输入用户名与密码会自动完 ...

  3. 51nod1471 小S的兴趣

    题目来源: CodeForces 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 320 小S喜欢有趣的事.但是,每个人的兴趣都是独特的.小S热衷于自问自答.有一天,小S想出了一个问题 ...

  4. mysql查询日期相关的

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...

  5. Dull Chocolates Gym - 101991D 离散化 前缀和

    题目链接:https://vjudge.net/problem/Gym-101991D 具体思路:首先看数据范围,暴力肯定不可以,可以下离散化,然后先求出离散化后每一个点到(1,1)的符合题目的要求的 ...

  6. 【Python学习】csv库

    csv(Comma-Separated Values, 逗号分割值)是存储表格数据的常用文件格式. 它每一行都用一个换行符分隔,列与列之间用逗号分隔. 本地文件 Python的csv库可以非常简单地修 ...

  7. MySQL源码分析（一）

    近段时间简单看了下Mysql源码相关内容,主要从一个select查询出发,查看了一下整个代码结构.分析总结如下: https://mubu.com/doc/explore/13965

  8. 用VIM查看编辑二进制文件

    用VIM查看编辑二进制文件 vim可以很方便地编辑二进制文件,个人认为它比emacs的二进制编辑方式更好用.vim中二进制文件的编辑是先通过外部程序xxd来把文件dump成其二进制的文本形式,然后就可 ...

  9. Mysql存储之原生语句操作(pymysql)

    Mysql存储之原生语句操作(pymysql) 关系型数据库是基于关系模型的数据库,而关系模型是通过二维表时实现的,于是构成了行列的表结构. 表可以看作是某个实体的集合,而实体之间存在联系,这个就需要 ...

  10. eclipse maven jetty启动修改默认端口

    如何修改eclipse中的maven项目jetty服务器的默认端口那?网上有很多办法,但配置上都没有效果,最后找到了简单.简洁的解决办法,就是在eclipse的jetty启动命令后面加上以下内容 je ...