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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
Node.js API详解之 readline模块用法详解
May 22 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学习笔记之一
2011/01/17 PHP
php解决约瑟夫环示例
2014/04/09 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
某公司的.net工程师面试题笔试题
2013/11/22 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
中专毕业生求职简历的自我评价
2013/10/21 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
信用卡工作证明模板
2014/09/14 职场文书
后备干部推荐材料
2014/12/24 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL