JavaScript-Table sorting (descending/reverse order) implementation introduction (with pictures)_javascript skills

Knowledge points:

Array method:

sort: descending order

reverse: reverse order

Effect:

Code:

Copy code The code is as follows:

	商品名称	商品描述	上架时间	价格	操作
	1	12312312313	2013-5-8	￥120	删除
	2	顶戴	2013-5-12	￥140	删除
	3	欠工	2013-4-8	￥320	删除
	4	七七	2013-8-8	￥520	删除
	5	苛	2013-5-25	￥820	删除
	6	黄梅雨	2013-5-2	￥120	删除
	7	工作服	2013-5-18	￥1220	删除
	8	地茜共	2013-3-8	￥1260	删除
	反选  删除

<script> <br>//批量设置checked值 <br>function setChecked(checkBoxs,checked){ <br>for(var i=0,len=checkBoxs.length;i<len;i ){ <BR>checkBoxs[i].checked=checked; <BR>} <BR>} <BR>//批量反置checked值 <BR>function reverseChecked(checkBoxs){ <BR>for(var i=0,len=checkBoxs.length;i<len;i ){ <BR>checkBoxs[i].checked=!checkBoxs[i].checked; <BR>} <BR>} <BR>//移除tr值 <BR>function removeTr(tBody,tr){ <BR>tBody.removeChild(tr); <BR>} <BR>//获取tr <BR>function getParentTr(o){ <BR>while(o){ <BR>o=o.parentNode; <BR>if(o&&o.tagName==="TR"){ <BR>return o; <BR>} <BR>} <BR>} <BR>//arrSort排序 <BR>function arrSort(arr,isDesc){ <BR>var arr=arr.sort(function(num1,num2){ <BR>return num1-num2; <BR>}); <BR>if(isDesc){//desc <BR>arr.reverse(); <BR>} <BR>return arr; <BR>} <BR>//表格排序 <BR>function tableSort(tablePart,col,fun,isDesc){ <BR>var arrNum=[],trs={}; <br><br>for(var i=0,len=tablePart.rows.length;i<len;i ){ <BR>var td=tablePart.rows[i].cells[col]; <BR>var num=fun(td); <BR>arrNum.push(num); <BR>trs["id" num]=trs["id" num]||[]; <BR>trs["id" num].push(getParentTr(td)); <BR>} <BR>arrNum=arrSort(arrNum,isDesc); <BR>for(var j=0,jlen=arrNum.length;j<jlen;j ){ <BR>for(var k=0,klen=trs["id" arrNum[j]].length;k<klen;k ){ <BR>var tr=trs["id" arrNum[j]].pop(); <BR>tablePart.appendChild(tr); <BR>} <BR>} <BR>} <br><br><BR>var table=document.getElementById("tableSort"); <BR>var checkBoxs=table.tBodies[0].getElementsByTagName('input'); <BR>var checkAll=document.getElementById("checkAll"); <BR>var reserveCheck=document.getElementById("reserveCheck"); <BR>var delSelect=document.getElementById("delSelect"); <BR>var timeSort=document.getElementById("timeSort"); <BR>var priceSort=document.getElementById("priceSort"); <br><br>checkAll.onclick=function(){ <BR>setChecked(checkBoxs,this.checked); <BR>} <br><br>reserveCheck.onclick=function(){ <BR>reverseChecked(checkBoxs); <BR>} <BR>table.tBodies[0].onclick=function(e){ <BR>var ev=e||window.event; <BR>var target=ev.target||ev.srcElement; <BR>if(!target)return; <BR>target._op=target.getAttribute("_op"); <BR>if(!target._op)return; <br><br>if(target._op==="check"&&target.type==="checkbox"&&!target.checked){ <BR>checkAll.checked=target.checked; <BR>} <BR>if(target._op==="del"){ <BR>var tr=getParentTr(target); <BR>removeTr(table.tBodies[0],tr); <BR>} <BR>} <BR>delSelect.onclick=function(){ <BR>var chk=[]; <BR>for(var i=0,len=checkBoxs.length;i<len;i ){ <BR>if(checkBoxs[i].checked){ <BR>var tr=getParentTr(checkBoxs[i]); <BR>chk.push(tr); <BR>} <BR>} <br><br><BR>for(var j=0,jlen=chk.length;j<jlen;j ){ <BR>removeTr(table.tBodies[0],chk[j]); <BR>} <BR>} <BR>var sortMark="↑↓"; <BR>timeSort.onclick=function(){ <BR>this.isDesc=(this.isDesc===true)?false:true; <BR>tableSort(table.tBodies[0],3,function(td){ <BR>return (new Date(td.innerHTML)).getTime(); <BR>},this.isDesc); <BR>priceSort.innerHTML="价格" <BR>this.innerHTML="上架时间" sortMark[this.isDesc?1:0]; <BR>} <BR>priceSort.onclick=function(){ <BR>this.isDesc=(this.isDesc===true)?false:true; <BR>tableSort(table.tBodies[0],4,function(td){ <BR>return parseInt(td.innerHTML.replace("￥",'')); <BR>},this.isDesc); <BR>timeSort.innerHTML="上架时间"; <BR>this.innerHTML="价格" sortMark[this.isDesc?1:0]; <BR>} <br><br></script>

总结：

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