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 HashTable
Jan 22 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
JQuery教学之性能优化
May 14 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
微信小程序使用npm支持踩坑
Nov 07 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 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
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Django教程笔记之中间件middleware详解
2018/08/01 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
python做接口测试的必要性
2019/11/20 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
优秀本科生求职推荐信
2014/02/24 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
检讨书格式
2019/04/25 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers