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

直接献上完整代码：

<!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. C3P0连接池配置方式

    c3p0的配置方式分为三种,分别是 1.setters一个个地设置各个配置项 2.类路径下提供一个c3p0.properties文件 3.类路径下提供一个c3p0-config.xml文件 1.set ...

  2. Xcode使用xib拖线时出现： could not insert new outlet connection

    解决方法: 1.在新建类的时候没有选择将这个类加入到对应的"Target"中. 2.重新将文件加入项目 操作步骤就是选中出问题的.m和.h文件,点删除键,然后选"Remo ...

  3. 创建自托管的SignalR服务端

    微软官方例子地址:http://www.asp.net/signalr/overview/deployment/tutorial-signalr-self-host 1.说明: SignalR服务端可 ...

  4. POI创建Excle

    1.导包 2.Demo Workbook wb=new HSSFWorkbook();//创建工作空间 Sheet sh= wb.createSheet("工作表1");//创建工 ...

  5. 转自http://blog.slogra.com/post-13.html，关闭centos虚拟机的蜂鸣声

    相信对经常在虚拟机做实验的人来说,每次按tab来补全命令的时候是最痛苦的,这个时候是最让人想把 电脑的蜂鸣器给拆下来,让我们来关闭这个烦人的东西吧.  在centos系统下的方法 1.临时解决办法:以 ...

  6. HTML5比较实用的代码

    增强IE兼容性 <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js&q ...

  7. mysql分表方法实现

    一般来说,当我们的数据库的数据超过了100w记录的时候就应该考虑分表或者分区了,这次我来详细说说分表的一些方法.目前我所知道的方法都是MYISAM的,INNODB如何做分表并且保留事务和外键,我还不是 ...

  8. php 输出昨天,今天,明天是星期几的方法

    <?php //php判断某一天是星期几的方法 function getWeek($unixTime=''){ $unixTime=is_numeric($unixTime)?$unixTime ...

  9. android手机获取手机号

    最近做到一个项目,需要获取手机号.项目中使用的手机卡为电信卡,那么就以此为例吧. 网上不符合需求的方法 Google了一下,网上的做法如下: //获取手机号码 TelephonyManager tm  ...

  10. Scala学习文档-访问修饰符

    在scala里,对保护成员的访问比Java严格.Scala中,保护成员只在定义了成员的类的子类中可以访问,而Java中,还允许在同一个包的其他类中访问. package p1 { class FCla ...