网站开发中凡是用到表格来展示数据的，往往都要根据某个列来对行排序，下面是我从书上看到的一个行排序例子，看过后受益匪浅，故分享出来。

直接献上完整代码：

<!doctype html>

<html lang="en">

<head>

<meta  charset="UTF-8" />

<title>Javascript原生代码实现表格排序</title>

<script type="text/javascript">

//根据指定表格每行第n个单元格的值，对第一个tbody中的行进行排序

//如果存在comparator函数则使用它，否则按字母表顺序比较

function sortRows(table,n,comparator){

    var tbody = table.tBodies[0];

    var rows = tbody.getElementsByTagName("tr");

    rows  = Array.prototype.slice.call(rows,0);//转化为真实数组

    //基于第n个<td>元素的值对行排序

    rows.sort(function(row1,row2){

        var cell1 = row1.getElementsByTagName("td")[n];

        var cell2 = row2.getElementsByTagName("td")[n];

        var val1 = cell1.textContent || cell1.innerText;//IE兼容

        var val2 = cell2.textContent || cell2.innerText;

        if(comparator) return comparator(val1,val2);

        if(val1<val2) return -1;

        else if(val1>val2) return 1;

        else return 0;

    });

    for(var i=0;i<rows.length;i++) tbody.appendChild(rows[i]);  //原先的会自动移除

}

//查找表格的<th>元素（假设只有一行），让它们可单击，以便单击该列对行排序

function makeSortTable(table){

    var headers = table.getElementsByTagName("th");

    for(var i=0;i<headers.length;i++){

        (function(n){ //嵌套函数来创建本地作用域 （这段代码自己也不太懂，自己试过把嵌套函数去掉，但结果出错，希望看懂这段代码的人也教教我）

            headers[i].onclick = function(){sortRows(table,n);};

         }(i));

    }

}

window.onload = function(){

    var table = document.getElementById("table");

    makeSortTable(table);

  }

</script>

<style type="text/css">

table{

    table-layout: auto;

    border-collapse: collapse;

}

th{

    border: solid 1px rgb(0,0,0);

    cursor:pointer;

}

th:hover{

    background: red;

}

td{

    border: solid 1px rgb(0,0,0);

}

</style>

</head>

<body>

<table id="table">

<thead><tr><th>Name</th><th>age</th></tr></thead>

<tr><td>lhm</td><td>24</td></tr>

<tr><td>hyl</td><td>25</td></tr>

<tr><td>hs</td><td>28</td></tr>

<tr><td>cg</td><td>23</td></tr>

<tr><td>yqf</td><td>23</td></tr>

<tr><td>wqz</td><td>38</td></tr>

<tr><td>xf</td><td>45</td></tr>

</table>

</body>

</html>

Javascript实现表格行排序的更多相关文章

  1. miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题

    最近在使用miniui框架做开发,在做表格行的点击监听事件中发现了几个属性,都可以起到监听效果但是执行的结果却大有不同.好了废话不多说,直接上代码. <div id="pageGrid ...

  2. 利用插件（jQuery-ui.js）实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  3. javaScript之表格操作<一:新增行>

    DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...

  4. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  5. 在Bootstrap开发框架中使用dataTable直接录入表格行数据

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...

  6. day37—javascript对表格table的操作应用（二）

    转行学开发,代码100天——2018-04-22 昨天学习了JavaScript对table的基本操作,包括表格的创建,表格元素的获取,隔行换色及鼠标动作等.今天主要学习table的搜索查询及排序操作 ...

  7. JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  8. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  9. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

随机推荐

  1. ORACLE基本SQL语句-查询篇

    一.普通查询 /*查询表数据*/select * from STU /*取出前3行数据*/select * from stu where ROWNUM<=3 /*模糊查询*/select * f ...

  2. Swift中子类必须包含的构造器和析构器

    import Foundation /* Swift中子类必须包含的构造器 1.Swift允许在父类构造器前添加required关键字, 用于声明所有子类必须包含该required构造器 (如果没有声 ...

  3. 网络流初步——增广路算法（EK）模板

    #include <iostream> #include <queue> #include<string.h> using namespace std; #defi ...

  4. uva 10212 - The Last Non-zero Digit.

    #include <cstdio> #define ll long long const ll MOD = 1e9; int main() { ll N, M; while(scanf(& ...

  5. C#Mysql数据库爆破源码

    声明: 代码仅供学习参考使用!开启了一个子线程,进行爆破! 速度不是很快,代码不是很规范,希望大牛不要喷我! c#控制台程序,需要引用MySql.Data.dll 默认用户名: root密码字典: p ...

  6. 腾讯的一道js面试题（原型）

    有一只小狗叫花花,它会“汪汪”叫,他的同伴也会汪汪叫,后来环境发生了变化,新出生的狗不会再“汪汪”叫,而变成“呜呜”叫. 试通过继承来达到目的 function Dog(){ 2 this.bark ...

  7. 关于nginx架构探究（1）

    nginx的架构主要是有一个主监控进程:master;三个工作进程:worker:还有Cache的两个进程.back-end-server是后端服务器,主要是处理后台逻辑.nginx作为代理服务器需要 ...

  8. OpenUrl 的跨平台实现

    OpenUrl 是 iOS 中 UIApplication 提供的一个函数,用于调用其它程序.实际上各个平台都有自己的实现,这里提供一个直接封装完的跨平台版本给大家.           Delphi ...

  9. 使用Qt实现MDI风格的主窗体

    文章来源:http://hi.baidu.com/wuyunju/item/3d20164c99a276f6dc0f6c52 QT提供了MDIArea控件可以很方便的实现标准的MDI窗体,但用起来并不 ...

  10. zabbix报警把特定的应用集发送给developer

    1.创建新的action 2.创建新的develop用户 3.需要删除组不然会给组里所有人发