javascript-表格排序(降序/反序)实现介绍(附图)

知识点：

　　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>

　　<thead>

　　<tr>

　　</tr>

　　</thead>

　　<tbody>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　</tbody>

　　<tfoot>

　　<tr>

　　</tr>

　　</tfoot>

　　</table>

　　//批量设置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页面，运行查看效果。

教程首页更多教程