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

直接献上完整代码：

<!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. centos静默式安装Oracle11g

    1.   Centos及Oracle版本 Centos:CentOS release 6.4 (Final) Oracle:linux.x64_Oracle_11gR2_database 2.   硬 ...

  2. Sudoku Killer

    算法:深搜 自从2006年3月10日至11日的首届数独世界锦标赛以后,数独这项游戏越来越受到人们的喜爱和重视. 据说,在2008北京奥运会上,会将数独列为一个单独的项目进行比赛,冠军将有可能获得的一份 ...

  3. POJ 1151 - Atlantis 线段树+扫描线..

    离散化: 将所有的x轴坐标存在一个数组里..排序.当进入一条线段时..通过二分的方式确定其左右点对应的离散值... 扫描线..可以看成一根平行于x轴的直线..至y=0开始往上扫..直到扫出最后一条平行 ...

  4. android手机获取手机号

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

  5. Python函数小结（1）--参数类型（*, ** 的区别）， 闭包

    刚开始学习python,python相对于java确实要简洁易用得多.内存回收类似hotspot的可达性分析, 不可变对象也如同java得Integer类型,with函数类似新版本C++的特性,总体来 ...

  6. css 画竖着线条

    <p>table控制:<!-- height为横线的粗度,width为长度 --><table width=700>     <tr>    <t ...

  7. 修改UITextField Placeholder的颜色

    修改UITextField Placeholder的颜色 1 第一种情况只是修改颜色等文字属性 创建属性字典 NSDictionary *attrsDic = @{ NSForegroundColor ...

  8. injector

    angular 提供了一套依赖注入的机制,和后台很像.虽然我不觉得有很重要. var $injector = angular.injector(["myModule"]); var ...

  9. GSM Channel Mode Modify和Channel Mode Modify Acknowledge信令

    最近研究了下如何通过GSM Channel Mode Modify和Channel Mode Modify Acknowledge信令,获知GSM终端支持的data Rate   思路与原理: • I ...

  10. How to install phpmyadmin on centos 6

    Phpmyadmin :   Phpmyadmin is a free tool used to administrate MySQL . Phpmyadmin supports all major ...