利用js排序html表格

2024-04-27 14:16:57

字体：大中小

来源：转载

供稿：网友

利用js排序html表格

在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>