table表格排序，JavaScript自带排序功能，点击表头实现升序降序，非常方便

最新推荐文章于 2024-04-08 16:29:28 发布

席海斌

最新推荐文章于 2024-04-08 16:29:28 发布

阅读量5.2k

点赞数 2

本文链接：https://blog.csdn.net/xi_haibin/article/details/82110197

版权

java 同时被 3 个专栏收录

14 篇文章 3 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

首先编写js文件，源码如下。我在这里命名为：script.js （如修改，在页面引用文件也要与之相同）

var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.table=function(){
	function sorter(n){this.n=n; this.pagesize=20; this.paginate=0}
	sorter.prototype.init=function(e,f){
		var t=ge(e), i=0; this.e=e; this.l=t.r.length; t.a=[];
		t.h=T$$('thead',T$(e))[0].rows[0]; t.w=t.h.cells.length;
		for(i;i<t.w;i++){
			var c=t.h.cells[i];
			if(c.className!='nosort'){
				c.className=this.head; c.onclick=new Function(this.n+'.wk(this.cellIndex)')
			}
		}
		for(i=0;i<this.l;i++){t.a[i]={}}
		if(f!=null){var a=new Function(this.n+'.wk('+f+')'); a()}
		if(this.paginate){this.g=1; this.pages()}
	};
	sorter.prototype.wk=function(y){
		var t=ge(this.e), x=t.h.cells[y], i=0;
		for(i;i<this.l;i++){
      t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].style.display='';
      while(v.hasChildNodes()){v=v.firstChild}
      t.a[i].v=v.nodeValue?v.nodeValue:''
    }
		for(i=0;i<t.w;i++){var c=t.h.cells[i]; if(c.className!='nosort'){c.className=this.head}}
		if(t.p==y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t.d=t.d?0:1}
		else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}
		var n=document.createElement('tbody');
		for(i=0;i<this.l;i++){
			var r=t.r[t.a[i].o].cloneNode(true); n.appendChild(r);
			r.className=i%2==0?this.even:this.odd; var cells=T$$('td',r);
			for(var z=0;z<t.w;z++){cells[z].className=y==z?i%2==0?this.evensel:this.oddsel:''}
		}
		t.replaceChild(n,t.b); if(this.paginate){this.size(this.pagesize)}
	};
	sorter.prototype.page=function(s){
		var t=ge(this.e), i=0, l=s+parseInt(this.pagesize);
		if(this.currentid&&this.limitid){T$(this.currentid).innerHTML=this.g}
		for(i;i<this.l;i++){t.r[i].style.display=i>=s&&i<l?'':'none'}
	};
	sorter.prototype.move=function(d,m){
		var s=d==1?(m?this.d:this.g+1):(m?1:this.g-1);
		if(s<=this.d&&s>0){this.g=s; this.page((s-1)*this.pagesize)}
	};
	sorter.prototype.size=function(s){
		this.pagesize=s; this.g=1; this.pages(); this.page(0);
		if(this.currentid&&this.limitid){T$(this.limitid).innerHTML=this.d}
	};
	sorter.prototype.pages=function(){this.d=Math.ceil(this.l/this.pagesize)};
	function ge(e){var t=T$(e); t.b=T$$('tbody',t)[0]; t.r=t.b.rows; return t};
	function cp(f,c){
		var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
		var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
		if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
		i=Date.parse(f); n=Date.parse(c);
		if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
		return g>h?1:(g<h?-1:0)
	};
	return{sorter:sorter}
}();

html页面源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript排序</title>


</head>
<body>

	<table cellpadding="0" cellspacing="0" border="1" id="table" style="margin: auto;width: 80%;text-align: center;">
		<thead>
			<tr>
				<th class="nosort"><h3>编号</h3></th>
				<th><h3>姓名</h3></th>
				<th><h3>年龄</h3></th>
				<th><h3>手机号</h3></th>
				<th><h3>QQ号</h3></th>
				<th><h3>Email</h3></th>
				<th><h3>分数</h3></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>xihaibin</td>
				<td>23</td>
				<td>17,612,347,894</td>
				<td>58962475</td>
				<td><a href="mailto:#">tordstor@163.cx</a></td>
				<td>100</td>
			</tr>
			<tr>
				<td>2</td>
				<td>liubei</td>
				<td>39</td>
				<td>12312,347,894</td>
				<td>456454555</td>
				<td><a href="mailto:#">adfdfgfgr@est.ca</a></td>
				<td>88</td>
			</tr>
			<tr>
				<td>3</td>
				<td>guanyu</td>
				<td>79</td>
				<td>,894</td>
				<td>19956455</td>
				<td><a href="mailto:#">dhrerer@est.ca</a></td>
				<td>98</td>
			</tr>
			<tr>
				<td>4</td>
				<td>zhaozhilong</td>
				<td>46</td>
				<td>13432347894</td>
				<td>45456455</td>
				<td><a href="mailto:#">rtytrrty@est.ca</a></td>
				<td>38</td>
			</tr>
			<tr>
				<td>5</td>
				<td>diaocan</td>
				<td>20</td>
				<td>0</td>
				<td>87987545</td>
				<td><a href="mailto:#">sadfdasf@est.ca</a></td>
				<td>68</td>
			</tr>
		</tbody>
  </table>

	
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("table",1);
</script>

</body>
</html>

运行即可看到效果。点击表格可以切换降序和倒序。

席海斌

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
table表格排序，JavaScript自带排序功能，点击表头实现升序降序，非常方便

首先编写js文件，源码如下。我在这里命名为：script.js （如修改，在页面引用文件也要与之相同）var TINY={};function T$(i){return document.getElementById(i)}function T$$(e,p){return p.getElementsByTagName(e)}TINY.table=function(){...
复制链接

扫一扫