js php排序表格,JavaScript表格排序的例子

一个HTML表格排序的程序，由于是自己写的，所以比较土，况且没有使用任何JavaScript库，所以只实现了一些简单的功能。

主要是了解一下原理。

例子，JavaScript表格排序 代码。

复制代码 代码示例:

function ieOrFireFox(ob) {

if (ob.textContent != null)

return ob.textContent;

var s = ob.innerText;

return s.substring(0, s.length);

}

function sortTableByColumn(sortTableId,iCol,dataType){

var sortTable = document.getElementById(sortTableId);

var tbody = sortTable.tBodies[0];

var colRows = tbody.rows;

var aTrs = new Array;

var sortedHeader = sortTable.tHead.rows[0].cells[iCol];

for (var i = 0; i < colRows.length; i++) {

aTrs[i] = colRows[i];

}

if (sortTable.sortCol == iCol) {

if (sortTable.sortOrder == "desc") {

aTrs.sort(compareEle(iCol, dataType,'asc'));

sortTable.sortOrder = "asc";

} else {

aTrs.sort(compareEle(iCol, dataType,'desc'));

sortTable.sortOrder = "desc";

}

} else {

aTrs.sort(compareEle(iCol, dataType,'asc'));

sortTable.sortOrder = "asc";

}

sortTable.sortCol = iCol;

var oFragment = document.createDocumentFragment();

for ( var i = 0; i < aTrs.length; i++) {

oFragment.appendChild(aTrs[i]);

}

tbody.appendChild(oFragment);

}

function sortTable(tableId,thobj,dataType) {

var iCol = document.getElementById(thobj).cellIndex;

sortTableByColumn(tableId,iCol,dataType);

}

function convert(sValue, dataType,sortDerection) {

switch (dataType) {

case "int":

if(sValue.length <= 0){

if(sortDerection == "asc") {

sValue = "1000";

} else {

sValue = "-1";

}

}

return parseInt(sValue, 10);

case "float":

return parseFloat(sValue);

case "date":

return new Date(Date.parse(sValue));

default:

return sValue.toString().toLowerCase();

}

}

function compareEle(iCol, dataType,sortDerection) {

return function(oTR1, oTR2) {

var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType,sortDerection);

var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType,sortDerection);

var returnResult = 0;

if (vValue1 < vValue2) {

returnResult = -1;

} else if (vValue1 > vValue2) {

returnResult = 1;

} else {

returnResult = 0;

}

if(sortDerection == "desc"){

return -returnResult;

} else {

return returnResult;

}

};

}

Html代码，表格排序。

复制代码 代码示例:

Table Sort Example-表格排序-www.jquerycn.cn

Click on the table header to sort in ascending order.

Last NameDateSalaryAgeChineseName

Smith2008/9/20100.0320我Johnson2008/10/4200.818爱Henderson2008/10/1150.345北Williams2008/10/085020京Gilliam2008/10/3400.29故Walker2008/11/420.620宫