Javascript实现表格行排序
Posted 一切源于简单
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript实现表格行排序相关的知识，希望对你有一定的参考价值。
网站开发中凡是用到表格来展示数据的，往往都要根据某个列来对行排序，下面是我从书上看到的一个行排序例子，看过后受益匪浅，故分享出来。
直接献上完整代码：
<!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实现表格行排序的主要内容，如果未能解决你的问题，请参考以下文章
通过 JavaScript 对 HTML 表格进行排序的最有效方法是啥？