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 相关文章推荐
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
关于vue组件事件属性穿透详解
Oct 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
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
thinkphp分页集成实例
2017/07/24 PHP
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
python 如何快速复制序列
2020/09/07 Python
Python requests接口测试实现代码
2020/09/08 Python
如何用Python绘制3D柱形图
2020/09/16 Python
培训演讲稿范文
2014/01/12 职场文书
年终总结会主持词
2014/03/25 职场文书
房屋继承公证书
2014/04/10 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
科学育儿宣传标语
2014/10/08 职场文书
干部年终考核评语
2015/01/04 职场文书
讲座通知范文
2015/04/23 职场文书
幼儿园辞职信
2015/05/13 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python