利用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>

利用js排序html表格的更多相关文章

js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
JS实现前台表格排序功能
JS实现前台表格排序功能虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
利用JavaScript实现动态显示表格且对应改变按键的value值
插入的代码并没有符合HTML5样式,只是为了实现利用JS动态显示表格,并且按键的value值会同时发生变化的功能. <!DOCTYPE > <html > <head&g ...
手把手教你用Vue造轮子（3）：开发可排序的表格组件
前言最近闰土大叔跟Vue干上了,没办法,公司业务驱动,不用Vue没招啊,leader尝到了前后端分离带来的好处,除非你离职,哈哈哈,当然,那是不可能的,对于我这种要攒钱买房子的人来说.那还说什么呢, ...
[转]JS组件系列——表格组件神器：bootstrap table
原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...
JS组件系列——表格组件神器：bootstrap table 包含了js对象的定义和对象成员函数的定义
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
总结下js排序算法和乱序算法
其实本人最怕的就是算法,大学算法课就感觉老师在讲天书,而且对于前端来说,算法在实际的应用中实在是很有限.毕竟算法要依靠大量的数据为基础才能发挥出算法的效率,就浏览器那性能,......是吧,退一万步说 ...

随机推荐

学习总结 java 创建及其练习
创建: 打开eclipse—文件—新建—java项目—项目名称命名—点击texe-1练习下拉箭头—右击src—新建—类—设置类名称(名称设置时不要添加空格),在“想要创建哪些方法跟”下面点击:publ ...
在 JNI 编程中避免内存泄漏
JAVA 中的内存泄漏 JAVA 编程中的内存泄漏,从泄漏的内存位置角度可以分为两种:JVM 中 Java Heap 的内存泄漏:JVM 内存中 native memory 的内存泄漏. Java H ...
random类的使用
小栗子a如下: string[] punch = new[] { "石头", "剪刀", "布" }; string myPunch; pu ...
qq 登录 cordova插件
1.下载open-sdk.jar文件和mta_sdk_x.x.x.jar文件拷贝到libs(或lib)目录下这个链接很容易的把环境配置好http://wiki.connect.qq.com/%E5% ...
Java 单测回滚
Java 在单测的时候需要做回滚设置如下: 需要添加以下注解在类上 defaultRollback = true : 为默认全部回滚 defaultRollback = false : 为 ...
AJAX验证用户是否存在
<html> <head> <title> ajax验证 </title> </head> <body> <input t ...
PHP 按二维数组的键值排序
/** * 按二维数组的键值排序 * @param unknown $array 二维数组 * @param unknown $key 二维数组的键值 * @param string $order 升 ...
银行ATM机工作流程模拟编程（代码）
#include<stdio.h>#include<stdlib.h>#include <conio.h>#include <string.h> voi ...
MySQL中的数据类型
文本 CHAR(*):最多255个字节的定长字符串,它的长度必须在创建时指定 VARCHAR(*):最多255个字节的可变长度字符串,它的长度必须在创建时指定 TEXT:最大长度为64K字符的变长文本 ...
foreach 和 list.foreach 初步测试
单纯从速度上讲小数据量下foreach 较快,list.Foreach 由于 public void ForEach(Action<T> action) { ; i <this._ ...

利用js排序html表格

利用js排序html表格的更多相关文章

随机推荐

热门专题