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

直接献上完整代码：

<!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. 学习OkHttp wiki--Interceptors

    Interceptors 拦截器(Interceptors)是一种强有力的途径,来监控,改写和重试HTTP访问.下面是一个简单的拦截器,对流出的请求和流入的响应记录日志. class LoggingI ...

  2. ORACLE中使用SQL的正则表达式判断邮箱格式

    在数据库中,有时需要判断字符串是否是一个或者多个邮箱格式,可以使用如下语句判断: ) FROM dual WHERE regexp_like(v_mail,'^\w+((-\w+)|(\.\w+))* ...

  3. 什么是 Terminal

    从用户的角度来看,Terminal 是键盘和显示器的组合,也称为 TTY(电传打字机的缩写).键盘输入字符,显示器显示字符. 从进程的角度来看,终端是字符设备,可以通过 read.write.ioct ...

  4. C# winform DataTable 批量数据处理 增、删、改 .

    1.批量新增,采用高效的SqlBulkCopy SqlBulkCopy DTS = new System.Data.SqlClient.SqlBulkCopy(con); DTS.NotifyAfte ...

  5. Cookie 添加，读取，删除

    Name,value – 声明时 new Cookie(key,value); Path        - 默认值,即为当前保存cookie的这个serlvet所在的路径. 如果Cookie在这样的路 ...

  6. vim+ctags+cscope工具

    最近在看一个开源的项目,突然发现在Linux上不知道有什么方便的工具来看开源代码.以前,在Windows上用VS2010集成开发环境,对于任意一个函数直接有快捷键跳转到函数定义处.可现在在Linux上 ...

  7. angularjs学习笔记—事件指令

    ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click=" ...

  8. Swift--访问级别-备

    访问级别: Swift提供了3种不同访问级别,对应的访问修饰符为:public.internal和private.这些访问修饰符可以修饰类.结构体.枚举等面向对象的类型,还可以修饰变量.常量.下标.元 ...

  9. 对CNN模块的分析

    对 CNN 模块的分析,该论文(Systematic evaluation of CNN advances on the ImageNet)已经做过了,里面的发现是非常有帮助的:   使用没有 bat ...

  10. 利用Qt将网页保存为PDF

    灵社区文章链接http://www.ituring.com.cn/article/128717起因是在群里和大家讨论自己做一个图灵社区的客户端,说没有API不好搞,后来fairjm童鞋发了个java版 ...