javascript-表格排序(降序/反序)实现介绍(附图)


Posted in Javascript onMay 30, 2013

知识点:

Array方法:

sort:降序

reverse:反序

效果:
javascript-表格排序(降序/反序)实现介绍(附图) 
代码:

<style> 
*{ 
margin: 0; 
padding: 0; 
} 
#tableSort{ 
line-height: 22px; 
background: #ccc; 
} 
#tableSort thead, 
#tableSort tfoot{ 
background: #066; 
color: #fff; 
font-size: 14px; 
} 
#tableSort thead a, 
#tableSort tfoot a{ 
color: #fff; 
} 
#tableSort tfoot{ 
background: #069; 
} 
#tableSort tbody td{ 
background: #fff; 
padding: 3px 5px; 
font-size: 12px; 
} 
</style> 
<table width="500" border="0" cellspacing="1" cellpadding="0" id="tableSort"> 
<thead> 
<tr> 
<th width="31" align="center"> </th> 
<th width="104">商品名称</th> 
<th width="104">商品描述</th> 
<th width="124" id="timeSort" _isDesc="false">上架时间</th> 
<th width="82" id="priceSort" _isDesc="false">价格</th> 
<th width="48">操作</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox3" id="checkbox2" _op="check" /></td> 
<td>1</td> 
<td>12312312313</td> 
<td>2013-5-8</td> 
<td>¥120</td> 
<td align="center"><a href="javascript:void(0)" _op="del">删除</a></td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox4" id="checkbox3" _op="check" /></td> 
<td>2</td> 
<td>顶戴</td> 
<td>2013-5-12</td> 
<td>¥140</td> 
<td align="center"><a href="javascript:void(0)" _op="del">删除</a></td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox5" id="checkbox4" _op="check" /></td> 
<td>3</td> 
<td>欠工</td> 
<td>2013-4-8</td> 
<td>¥320</td> 
<td align="center"><a href="javascript:void(0)" _op="del">删除</a></td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox6" id="checkbox5" _op="check" /></td> 
<td>4</td> 
<td>七七</td> 
<td>2013-8-8</td> 
<td>¥520</td> 
<td align="center"><a href="javascript:void(0)" _op="del">删除</a></td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox7" id="checkbox6" _op="check" /></td> 
<td>5</td> 
<td>苛</td> 
<td>2013-5-25</td> 
<td>¥820</td> 
<td align="center"><a href="javascript:void(0)" _op="del">删除</a></td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox8" id="checkbox7" _op="check" /></td> 
<td>6</td> 
<td>黄梅雨</td> 
<td>2013-5-2</td> 
<td>¥120</td> 
<td align="center"><a href="javascript:void(0)" _op="del">删除</a></td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox9" id="checkbox8" _op="check" /></td> 
<td>7</td> 
<td>工作服</td> 
<td>2013-5-18</td> 
<td>¥1220</td> 
<td align="center"><a href="javascript:void(0)" _op="del">删除</a></td> 
</tr> 
<tr> 
<td align="center"><input type="checkbox" name="checkbox10" id="checkbox9" _op="check" /></td> 
<td>8</td> 
<td>地茜共</td> 
<td>2013-3-8</td> 
<td>¥1260</td> 
<td align="center"><a href="javascript:void(0)" _op="del">删除</a></td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<th align="center"><input type="checkbox" name="checkbox" id="checkAll" /></th> 
<th align="left"><a href="javascript:void(0)" id="reserveCheck" >反选</a>  <a href="javascript:void(0)" id="delSelect">删除</a></th> 
<th align="left"> </th> 
<th> </th> 
<th> </th> 
<th><a href="#"></a></th> 
</tr> 
</tfoot> 
</table> 
<script> 
//批量设置checked值 
function setChecked(checkBoxs,checked){ 
for(var i=0,len=checkBoxs.length;i<len;i++){ 
checkBoxs[i].checked=checked; 
} 
} 
//批量反置checked值 
function reverseChecked(checkBoxs){ 
for(var i=0,len=checkBoxs.length;i<len;i++){ 
checkBoxs[i].checked=!checkBoxs[i].checked; 
} 
} 
//移除tr值 
function removeTr(tBody,tr){ 
tBody.removeChild(tr); 
} 
//获取tr 
function getParentTr(o){ 
while(o){ 
o=o.parentNode; 
if(o&&o.tagName==="TR"){ 
return o; 
} 
} 
} 
//arrSort排序 
function arrSort(arr,isDesc){ 
var arr=arr.sort(function(num1,num2){ 
return num1-num2; 
}); 
if(isDesc){//desc 
arr.reverse(); 
} 
return arr; 
} 
//表格排序 
function tableSort(tablePart,col,fun,isDesc){ 
var arrNum=[],trs={}; for(var i=0,len=tablePart.rows.length;i<len;i++){ 
var td=tablePart.rows[i].cells[col]; 
var num=fun(td); 
arrNum.push(num); 
trs["id"+num]=trs["id"+num]||[]; 
trs["id"+num].push(getParentTr(td)); 
} 
arrNum=arrSort(arrNum,isDesc); 
for(var j=0,jlen=arrNum.length;j<jlen;j++){ 
for(var k=0,klen=trs["id"+arrNum[j]].length;k<klen;k++){ 
var tr=trs["id"+arrNum[j]].pop(); 
tablePart.appendChild(tr); 
} 
} 
} 

var table=document.getElementById("tableSort"); 
var checkBoxs=table.tBodies[0].getElementsByTagName('input'); 
var checkAll=document.getElementById("checkAll"); 
var reserveCheck=document.getElementById("reserveCheck"); 
var delSelect=document.getElementById("delSelect"); 
var timeSort=document.getElementById("timeSort"); 
var priceSort=document.getElementById("priceSort"); 
checkAll.onclick=function(){ 
setChecked(checkBoxs,this.checked); 
} 
reserveCheck.onclick=function(){ 
reverseChecked(checkBoxs); 
} 
table.tBodies[0].onclick=function(e){ 
var ev=e||window.event; 
var target=ev.target||ev.srcElement; 
if(!target)return; 
target._op=target.getAttribute("_op"); 
if(!target._op)return; 
if(target._op==="check"&&target.type==="checkbox"&&!target.checked){ 
checkAll.checked=target.checked; 
} 
if(target._op==="del"){ 
var tr=getParentTr(target); 
removeTr(table.tBodies[0],tr); 
} 
} 
delSelect.onclick=function(){ 
var chk=[]; 
for(var i=0,len=checkBoxs.length;i<len;i++){ 
if(checkBoxs[i].checked){ 
var tr=getParentTr(checkBoxs[i]); 
chk.push(tr); 
} 
} 

for(var j=0,jlen=chk.length;j<jlen;j++){ 
removeTr(table.tBodies[0],chk[j]); 
} 
} 
var sortMark="↑↓"; 
timeSort.onclick=function(){ 
this.isDesc=(this.isDesc===true)?false:true; 
tableSort(table.tBodies[0],3,function(td){ 
return (new Date(td.innerHTML)).getTime(); 
},this.isDesc); 
priceSort.innerHTML="价格" 
this.innerHTML="上架时间"+sortMark[this.isDesc?1:0]; 
} 
priceSort.onclick=function(){ 
this.isDesc=(this.isDesc===true)?false:true; 
tableSort(table.tBodies[0],4,function(td){ 
return parseInt(td.innerHTML.replace("¥",'')); 
},this.isDesc); 
timeSort.innerHTML="上架时间"; 
this.innerHTML="价格"+sortMark[this.isDesc?1:0]; 
} 
</script>

总结:

完成了基本功能,对于联合排序没有实现。后期会慢慢加入,有兴趣的可以把代码放到html页面,运行查看效果。

Javascript 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
canvas时钟效果
Feb 16 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
ionic实现底部分享功能
May 11 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 #Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 #Javascript
js控制的遮罩层实例介绍
May 29 #Javascript
js控制web打印(局部打印)方法整理
May 29 #Javascript
js动态为代码着色显示行号
May 29 #Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 #Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 #Javascript
You might like
第六节 访问属性和方法 [6]
2006/10/09 PHP
表单复选框向PHP传输数据的代码
2007/11/13 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
Bootstrap精简教程
2015/11/27 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python模块之StringIO使用示例
2015/04/08 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Python Map 函数的使用
2020/08/28 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
python自动化办公操作PPT的实现
2021/02/05 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
学校运动会广播稿范文
2014/10/02 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang