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

转载于:https://www.cnblogs.com/jinhuixin/p/4081643.html

利用js排序html表格相关推荐

利用JS来实现表格的全选、全不选、反选以及删除的功能
利用JS来进行表格的选择删除等功能二.代码 1.表格的制作以及事件的绑定 2.全选按钮的功能实现 3.全不选按钮的功能实现 4.反选按钮的功能实现 5.删除按钮的功能实现 6.鼠标悬停时颜色的变化 ...
html利用js生成excel表格（html表格标签生成excel）table2excel实例：一表格多sheets
table2excel实例使用插件:table2excel.js 简介:table2excel 可以转换和下载html上的表格,使他成为.xlsx格式,能够被Excel打开实例代码 <hea ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
html excel 在线编辑,利用js实现在线编辑excel表格代码
特效描述:利用js实现在线编辑 excel 表格代码.利用js实现在线编辑excel表格代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 function load(){ x ...
html表格按照编号排序,JS实现简单表格排序操作示例
本文实例讲述了JS实现简单表格排序操作.分享给大家供大家参考,具体如下: sort table *{ margin:0px; padding:0px; } body{ background:#ccc; ...
JS利用for循环画表格解析json字符串数据写入表格
背景:因为工作需要,需要讲数据拆分之后放入表格中,一共需要64行8列,总不能手动搞吧,于是便想先获取行数,再根据行数决定画多少行,但是数据获取有问题,暂时这块没有解决,只利用for循环画了64行,然后 ...
Vue.js学习笔记—sort-table：实战：使用Render函数开发可排序的表格组件
参考<Vue,js>实战(梁灏编著) sort-table:实战:使用Render函数开发可排序的表格组件 index.html <!DOCTYPE html> <htm ...
利用js对页面数据进行排序
先把标签用jQuery读进对象数组用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用对象数组内容覆盖网页上的标签数组; 转载于:https://www.cnb ...
js建立excel表格_建立Excel足球联赛表格传统方法与动态数组
js建立excel表格介绍 (Introduction) I am going to show you the different ways you can build a football lea ...
Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...

利用js排序html表格

利用js排序html表格相关推荐

最新文章

热门文章