Sort Table

来源：互联网发布：手机淘宝网app下载编辑：程序博客网时间：2024/04/30 15:50

为了前台页面的排序，自己写了一个排序方法。

/*Function: sort table by ASC or DescParameter:tid ,table's id attribute valueReturn: no return valueauthor:Owen*///Function Start//Set golabel variable asc shift asc to desc var asc = 1;function sortTable(tid){var tableObj = document.getElementById(tid);var tabRows = new Array();tabRows =tableObj.rows;var tabCells = "";var cellsArr= new Array();var rowsArr = new Array();for (var i = 1;tabRows[i];i++){ //index=0 is header column so start with 1. tabCells = tabRows[i].cells; //set sorted cell value to array. cellsArr[i-1] = tabCells[0].innerHTML; //set every row of every cell value to array as a string. var strCell = ""; for(var r = 0;tabCells[r];r++){    strCell += tabCells[r].innerHTML + "&!~*^" ; } //store cells innerHTML into rowsArr. rowsArr[i] = strCell; //set empty value to avoid unknown error strCell = "";}//sort function this is Array sort()var sortCell = cellsArr.sort();//desc wayif((asc%2)!=0){for(var j = sortCell.length-1;sortCell[j];j--){ for(var k =1;rowsArr[k];k++){  if((rowsArr[k].indexOf(sortCell[j]))!=-1){var t_cell = rowsArr[k].split("&!~*^");    var tmp_cells =tabRows[sortCell.length-j].cells;for(var tt = 0;tmp_cells[tt];tt++){  tmp_cells[tt].innerHTML = t_cell[tt];}   }  }}}else{//asc wayfor(var j = 0;sortCell[j];j++){ for(var k =1;rowsArr[k];k++){  if((rowsArr[k].indexOf(sortCell[j]))!=-1){var t_cell = rowsArr[k].split("&!~*^");    var tmp_cells =tabRows[j+1].cells;for(var tt = 0;tmp_cells[tt];tt++){  tmp_cells[tt].innerHTML = t_cell[tt];}   }  }}}//auto-in asc++; }function changeCss(obj){obj.style.cursor="pointer";}

应用实例：

<html><head><title>sort table</title><script type="text/javascript" src="SortTable.js"></script></head><body><table id="tab"><thead><tr><th onclick="sortTable('tab');" onmouseover="changeCss(this);">header 1</th><th>header 2</th><th>header 3</th></tr></thead><tbody><tr><td>aaa</td><td>232</td><td>afdfdsg</td></tr><tr><td>fff</td><td>3sdf2</td><td>tttsd</td></tr><tr><td>ccc</td><td>1211</td><td>afdfsdfdsg</td></tr><tr><td>ddd</td><td>3333</td><td>afaddfdsg</td></tr><tr><td>bbb</td><td>279</td><td>dafdfdsg</td></tr><tr><td>eee</td><td>789043</td><td>dffsgafdfdsg</td></tr></tbody></table></body></html>

读者可以拷贝代码并且运行。

谢谢关注！下次再见！