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

直接献上完整代码：

<!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. MySql多条SQL语句的批量处理

    pstmt= conn.prepareStatement(sql); for(int i=0;i<500;i++) { //准备sql语句 pstmt.setString(1, "tt ...

  2. 修改Servlet模板

    1.找到jar文件 查看MyEclipse根目录下的myeclipse.ini,找到Common文件夹的位置,打开文件夹..\Common\plugins 找到文件 com.genuitec.ecli ...

  3. C++中的析构函数

    代码: #include <cstdio> #include <iostream> using namespace std; class A{ public: ~A(){ co ...

  4. hibernate级联保存，更新个人遇到的问题

    在级联更新的时候,数据库中的数据是增加的,只是外键不存在,导致这样的问题产生的原因是,字表主键ID没有添加到集合中,导致Hibernate找不到子项而执行更新.

  5. 数学函数类方法的使用.java

    public class Test { public static void main(String[] args) { double a=2,b=3; double z1=Math.pow(a,b) ...

  6. 详细解析 RxAndroid 的使用方式

    RxAndroid是RxJava的扩展, 优雅地处理异步请求. RxAndroid配合Lambda表达式, 精简处理回调, 使程序更具有可读性. Rx作为Android最优秀的开源库之一, 极大地提高 ...

  7. html5标签placeholder使用

    <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp&q ...

  8. awk的日志模块追加日期时间字段的方案

    function test() { i = ) { system("sleep 1") "date +'%Y-%m-%d %H:%M:%S'" | getlin ...

  9. Ubuntu下配置使用maven

    下载界面: http://maven.apache.org/download.cgi 当前下载:apache-maven-3.2.5-bin.zip 解压到:/usr/lib/jvm/apache-m ...

  10. CSS3 Flexbox布局那些事

    相信研究过CSS3的同学对Flexbox布局一定不会陌生(作为一个未来主流的布局方式,至少有所耳闻).最近完成了两个项目:一个是移动端H5项目,一个是嵌入HTML页面的mac客户端项目.为了庆祝这两个 ...