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中null与undefined分析
Jul 25 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python内存动态分配过程详解
2019/07/15 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
销售文员的岗位职责
2013/11/20 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
班主任工作实习计划
2015/01/16 职场文书
打架检讨书范文
2015/01/27 职场文书
导游词300字
2015/02/13 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
python高温预警数据获取实例
2022/07/23 Python