html表格字段排序,js实现表格字段排序1.⽐较函数⽣成器：
/**
* ⽐较函数⽣成器
*
* @param iCol
*            数据⾏数
* @param sDataType
*            该⾏的数据类型
* @return
*/
function  generateCompareTRs(iCol, sDataType) {
return  function  compareTRs(oTR1, oTR2) {
vValue1 = lls[iCol].deValue, sDataType);
vValue2 = lls[iCol].deValue, 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  String();
}
}
3.主函数：
/**
* 通过表头对表列进⾏排序
*
* @param sTableID
*            要处理的表ID
* @param iCol
*            字段列id eg: 0 1 2 3 ...
* @param sDataType
*            该字段数据类型 int,float,date 缺省情况下当字符串处理*/
function  sortTable(sTableID, iCol, sDataType) {
var  oTable = ElementById(sTableID);
var  oTBody = oTable.tBodies[0];
var  colDataRows = ws;
var  aTRs =  new  Array;
for  (  var  i = 0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if  (oTable.sortCol == iCol) {
}  else  {
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var  oFragment = ateDocumentFragment();
for  (  var  j = 0; j < aTRs.length; j++) {
oFragment.appendChild(aTRs[j]);
}
oTBody.appendChild(oFragment);sort函数 js
oTable.sortCol = iCol;
}
将以上问代码封装到⼀个js⽂件中，在html页⾯中引⽤。
测试test.html:
< html  xmlns = "/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 >

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。