js表格排序執行個體分析（支援int,float,date,string四種資料類型），執行個體分析float

js表格排序執行個體分析（支援int,float,date,string四種資料類型），執行個體分析float

本文執行個體講述了js表格排序的方法。分享給大家供大家參考。具體如下：

<html><head><title>SortTable2</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript">var k=0;/**//**************************************************************************排序的主方法，有三個形參，STableTd,iCol,sDataType分別為需要排序的表格ID，需要排序的表格列號，所在列的資料類型（支援int,float,date,string四種資料類型)**************************************************************************/function sortTable(sTableId,iCol,sDataType){  var oTable=document.getElementById(sTableId);//擷取表格的ID   var oTbody=oTable.tBodies[0]; //擷取表格的tbody  var colDataRows=oTbody.rows; //擷取tbody裡的所有行的引用  var aTRs=new Array(); //定義aTRs數組用於存放tbody裡的行  for(var i=0;i<colDataRows.length;i++) //依次把所有行放如aTRs數組  {    aTRs.push(colDataRows[i]);  }  /**//***********************************************************************  sortCol屬性是額外給table添加的屬性，用於作順反兩種順序排序時的判斷，區分  首次排序和後面的有序反轉  ************************************************************************/  if(oTable.sortCol==iCol) //非首次排序  {    aTRs.reverse();  }  else  //首次排序  {    if(k%2==0) //升序    {      aTRs.sort(generateCompareTRs(iCol,sDataType));    }    else if(k%2==1) //降序    {      aTRs.sort(generateCompareTRs1(iCol,sDataType));    }  }  var oFragment=document.createDocumentFragment();  //建立文檔片段  for(var i=0;i<aTRs.length;i++)  //把排序過的aTRs數群組成員依次添加到文檔片段  {    oFragment.appendChild(aTRs[i]);  }  oTbody.appendChild(oFragment); //把文檔片段添加到tbody,完成排序後的顯示更新   oTable.sortCol=iCol;  //把當前列號賦值給sortCol,以此來區分首次排序和非首次排序,//sortCol的預設值為-1};//比較函數，用於兩項之間的排序//升序function generateCompareTRs(iCol,sDataType){  return  function compareTRs(oTR1,oTR2)  {    var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);    var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);    if(vValue1<vValue2)    {      return -1;    }    else if(vValue1>vValue2)    {      return 1;    }    else    {      return 0;    }  };};//降序function generateCompareTRs1(iCol,sDataType){  return  function compareTRs(oTR1,oTR2)  {    var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);    var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);    if(vValue1>vValue2)    {      return -1;    }    else if(vValue1<vValue2)    {      return 1;    }    else    {      return 0;    }  };};//資料類型轉換函式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();  }};</script></head><body><form name="f1" id="f1" action="" method="post"><table border="1" id="tblSort" sortCol="-1"><thead> <tr>  <th onClick="sortTable('tblSort',0);" style="cursor:pointer">Last Name</th>  <th onClick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>  <th onClick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>  <th onClick="sortTable('tblSort',3,'int')" style="cursor:pointer">Silbings</th> </tr></thead><tbody> <tr>  <td>Simth</td>  <td>John</td>  <td>7/12/1978</td>  <td>50nGy/h</td> </tr> <tr>  <td>Johnson</td>  <td>Betty</td>  <td>5/12/1965</td>  <td>20nGy/h</td> </tr> <tr>  <td>Henderson</td>  <td>Nathan</td>  <td>10/15/1977</td>  <td>130nGy/h</td> </tr> <tr>  <td>Willianms</td>  <td>James</td>  <td>2/25/1949</td>  <td>10nGy/h</td> </tr> <tr>  <td>Gilliam</td>  <td>Michael</td>  <td>7/8/1980</td>  <td>140nGy/h</td> </tr> <tr>  <td>Walker</td>  <td>Matthew</td>  <td>6/18/1981</td>  <td>103nGy/h</td> </tr></tbody>   </table></form></body></html>

希望本文所述對大家的javascript程式設計有所協助。