利用js排序html表格

kevn / 2014.04.08 / 个人经验

在web前端开发中会遇到排序等功能,当然也可以用服务器端来排序,今天我做一个笔记,怎么用js来实现这些复杂的功能呢。

在学习这个之前一定得用html dom jquery 的知识,要不没有办法看明白的,当然也不包括你是一个天才了。哈哈!

好了,先说一下思路,这里说一下,在学习一个js特效的时候思路很重要,可以说你不用对js多么的精通,但是一个功能放在你的面前,你必须有个很清晰的思路,这样做起来就很容易了,就算是再困难的特效也不例外!

一共有四个步骤:首先要给触发排序的控件添加事件,这里我就略过了。

1.把要排序的内容添加到数组里



var tIndex=parseInt($(this).index());	
	var valueArray=new Array();
	var p=0;
	for(var i=1; i<$("table tr").length; i++){
	
		if(tIndex!=0){
			valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());
		}else{
			valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();
		}
		
		p++;
	
	}
2.数据排序




//数据排序
	if(pk==1){
		valueArray.sort(function(a,b){ return a<b ? -1:1})
		pk=2
	}else{
		valueArray.sort(function(a,b){ return a>b ? -1:1})
		pk=1
	}
3.匹配内容    加入到一个隐藏的排序div里



for(var i=0; i<valueArray.length; i++){
		for(var d=1; d<$("table tr").length; d++){
			var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();
			if(valueArray[i]==valueText){
				$("table tr").eq(d).clone().appendTo(".none")				
			}
		}
		
	}
4.重新整理html 排序,添加到视图里



var titleClone=$("table tr").eq(0).clone(true);
	$("table").html("").append(titleClone);
	
	$("table").append($(".none").html())
	
	$(".none").html("");
通过这四个步骤就可以实现你要js排序的功能了,是不是很简单呢,也可以通过这个例子举一反三。这得看大家的想象力了。


下面上一个完整的代码


<!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>js排序特效</title>
<script src="http://suiyidian.cn/texiao/tab/jquery-1.5.2.min.js" type="text/javascript"></script>
<style>
.main{ height:auto; overflow:hidden; margin:0px auto;}
.main td{ text-align:center; height:28px; width:100px; line-height:28px ; font-size:14px; color:#555;}
.main .title td{ cursor:pointer; color:#333}
.none{ display:none}
</style>

<script>

$(function(){
var pk=1;
$(".title td").click(function(){
	// 把要排序的内容添加到数组里
	var tIndex=parseInt($(this).index());	
	var valueArray=new Array();
	var p=0;
	for(var i=1; i<$("table tr").length; i++){
	
		if(tIndex!=0){
			valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());
		}else{
			valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();
		}
		
		p++;
	
	}
	
	//数据排序
	if(pk==1){
		valueArray.sort(function(a,b){ return a<b ? -1:1})
		pk=2
	}else{
		valueArray.sort(function(a,b){ return a>b ? -1:1})
		pk=1
	}
	
	//匹配内容	加入到一个隐藏的排序div里+-
	for(var i=0; i<valueArray.length; i++){
		for(var d=1; d<$("table tr").length; d++){
			var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();
			if(valueArray[i]==valueText){
				$("table tr").eq(d).clone().appendTo(".none")				
			}
		}
		
	}
	//重新整理html 排序,添加到视图里
	var titleClone=$("table tr").eq(0).clone(true);
	$("table").html("").append(titleClone);
	
	$("table").append($(".none").html())
	
	$(".none").html("");
	
	
	
})

})
</script>
</head>

<body>
<table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666">
  <tr class="title">
    <td bgcolor="#CCCCCC">姓名</td>
    <td bgcolor="#CCCCCC">年龄</td>
    <td bgcolor="#CCCCCC">出生年</td>
    <td bgcolor="#CCCCCC">分数</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">李百(L)</td>
    <td bgcolor="#FFFFFF">15</td>
    <td bgcolor="#FFFFFF">1988</td>
    <td bgcolor="#FFFFFF">99</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">王易(W)</td>
    <td bgcolor="#FFFFFF">25</td>
    <td bgcolor="#FFFFFF">2000</td>
    <td bgcolor="#FFFFFF">150</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">林明(L)</td>
    <td bgcolor="#FFFFFF">18</td>
    <td bgcolor="#FFFFFF">1745</td>
    <td bgcolor="#FFFFFF">120</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">李姐(L)</td>
    <td bgcolor="#FFFFFF">20</td>
    <td bgcolor="#FFFFFF">1996</td>
    <td bgcolor="#FFFFFF">130</td>
  </tr>
</table>
<div class="none"></div>

<div style="text-align:center; font-size:12px; margin-top:10px"> 特效出自:kevn-<a href="http://suiyidian.cn" target="_blank">web前段开发</a></div>
</body>
</html>
js排序特效_20140408230112.png



DEMO:点击演示

欢迎转载,转载出自:

web前端开发http://suiyidian.cn/?post=148
作者:梦工厂

^-^有了你的支持,才能走的更远!

换个金额

微信扫一扫打赏

up