html表格字段排序,js实现表格字段排序

1.比较函数生成器：

/**

* 比较函数生成器

*

* @param iCol

*            数据行数

* @param sDataType

*            该行的数据类型

* @return

*/

function  generateCompareTRs(iCol, sDataType) {

return   function  compareTRs(oTR1, oTR2) {

vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);

vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);

if  (vValue1 < vValue2) {

return  -1;

}  else   if  (vValue1 > vValue2) {

return  1;

}  else  {

return  0;

}

};

}

2.处理比较字符类型：

/**

* 处理排序的字段类型

*

* @param sValue

*            字段值 默认为字符类型即比较ASCII码

* @param sDataType

*            字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)

* @return

*/

function  convert(sValue, sDataType) {

switch  (sDataType) {

case   "int" :

return  parseInt(sValue);

case   "float" :

return  parseFloat(sValue);

case   "date" :

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

default :

return  sValue.toString();

}

}

3.主函数：

/**

* 通过表头对表列进行排序

*

* @param sTableID

*            要处理的表ID

* @param iCol

*            字段列id eg: 0 1 2 3 ...

* @param sDataType

*            该字段数据类型 int,float,date 缺省情况下当字符串处理

*/

function  sortTable(sTableID, iCol, sDataType) {

var  oTable = document.getElementById(sTableID);

var  oTBody = oTable.tBodies[0];

var  colDataRows = oTBody.rows;

var  aTRs =  new  Array;

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

aTRs[i] = colDataRows[i];

}

if  (oTable.sortCol == iCol) {

aTRs.reverse();

}  else  {

aTRs.sort(generateCompareTRs(iCol, sDataType));

}

var  oFragment = document.createDocumentFragment();

for  (  var  j = 0; j < aTRs.length; j++) {

oFragment.appendChild(aTRs[j]);

}

oTBody.appendChild(oFragment);

oTable.sortCol = iCol;

}

将以上问代码封装到一个js文件中，在html页面中引用。

测试test.html:

< html   xmlns = "http://www.w3.org/1999/xhtml" >

< title > 表列排序 title >

< script   type = "text/javascript"   src = "js/sortTable.js" > script >

< body >

< table   border = "1"   id = "tblSort" >

< thead   style = "color: red; bgcolor: blank" >

< tr >

< th   onclick = " sortTable('tblSort',0);"   style = "cursor: pointer" > LastName th >

< th   onclick = " sortTable('tblSort',1,'int');"   style = "cursor: pointer" > Number th >

< th   onclick = " sortTable('tblSort',2,'date');"   style = "cursor: pointer" > Date th >

tr >

thead >

< tbody >

< tr >

< td > A td >

< td > 1 td >

< td > 5/9/2008 td >

tr >

< tr >

< td > B td >

< td > 3 td >

< td > 6/9/2008 td >

tr >

< tr >

< td > D td >

< td > 6 td >

< td > 5/4/2008 td >

tr >

< tr >

< td > E td >

< td > -5 td >

< td > 5/4/2007 td >

tr >

< tr >

< td > H td >

< td > 34 td >

< td > 5/8/2008 td >

tr >

< tr >

< td > C td >

< td > 12 td >

< td > 1/4/2018 td >

tr >

tbody >

table >

body >

html >