利用js排序html表格
在web前端开发中会遇到排序等功能,当然也可以用服务器端来排序,今天我做一个笔记,怎么用js来实现这些复杂的功能呢。
在学习这个之前一定得用html dom jquery 的知识,要不没有办法看明白的,当然也不包括你是一个天才了。哈哈!
好了,先说一下思路,这里说一下,在学习一个js特效的时候思路很重要,可以说你不用对js多么的精通,但是一个功能放在你的面前,你必须有个很清晰的思路,这样做起来就很容易了,就算是再困难的特效也不例外!
一共有四个步骤:首先要给触发排序的控件添加事件,这里我就略过了。
1.把要排序的内容添加到数组里
2.数据排序
var tIndex=parseInt($(this).index());
var valueArray=newArray();
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++;
}
3.匹配内容 加入到一个隐藏的排序div里
//数据排序
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
}
4.重新整理html 排序,添加到视图里
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")
}
}
}
通过这四个步骤就可以实现你要js排序的功能了,是不是很简单呢,也可以通过这个例子举一反三。这得看大家的想象力了。
var titleClone=$("table tr").eq(0).clone(true);
$("table").html("").append(titleClone);
$("table").append($(".none").html())
$(".none").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>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:0pxauto;}
.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=newArray();
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>
建议继续学习:
- 如何使用1M的内存排序100万个8位数 (阅读:10869)
- 快速排序(Quicksort)的Javascript实现 (阅读:10075)
- 腾讯-1亿个数据取前1万大的整数-题解答 (阅读:9026)
- 深入浅出插入类排序算法(直接插入, 折半插入, 希尔排序) (阅读:6167)
- 深入浅出交换类排序算法(冒泡排序,快速排序) (阅读:5970)
- Java程序员必知的8大排序算法 (阅读:4439)
- Mysql中的排序优化 (阅读:4339)
- Vim(gVim)对排序的妙用 (阅读:4207)
- 快速排序详细分析 (阅读:3943)
- 深入浅出选择类排序算法(简单选择排序,堆排序) (阅读:3739)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:kevn 来源: web前端开发-kevn 记录web前端开发技术
- 标签: 排序
- 发布时间:2015-01-19 23:53:35
- [66] Go Reflect 性能
- [65] Oracle MTS模式下 进程地址与会话信
- [64] 如何拿下简短的域名
- [59] android 开发入门
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则