javascript学习笔记之表格排序

<script language="javascript">
//数字比较函数，因为JS的数字比较，32没有4大，很郁闷的说，特意做个处理
function compareIntegers(vNum1, vNum2) {
 var iNum1 = parseInt(vNum1);
 var iNum2 = parseInt(vNum2);
 
 if(iNum1 < iNum2) {
  return -1;
 } else if(iNum1 > iNum2) {
  return 1;
 } else {
  return 0;
 }
}
//var arr = [3, 32, 2, 35, 43, 54, 15];
//arr.sort(compareIntegers);
//alert(arr.toString());

//转换函数，主要是将传递进来的字符串，转换成相应的类型变量
function convert(sValue, sDataType) {
 if(typeof(sDataType) != 'undefined') {
  var type = sDataType.toLowerCase();
 }
 switch(type) {
  case "int":
   return parseInt(sValue);
  case "float":
   return parseFloat(sValue);
  case "date":
   return new Date(Date.parse(sValue));
  default:
   return sValue.toString();
 }
}

//比较单元格的数值大小
function generateCcompareTRs(iCol, sDataType) {
 return function compareTRs(oTR1, oTR2) {
  var sValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
  var sValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
 
  if(sValue1 < sValue2) {
   return -1;
  } else if(sValue1 > sValue2) {
   return 1;
  } else {
   return 0;
  }
 };
}

//表格排序
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.push(colDataRows[i]);
 }
 if(oTable.sortCol == iCol) {
  aTRs.reverse();
 } else {
  aTRs.sort(generateCcompareTRs(iCol, sDataType));
 }
 
 //创建一个文档碎片，将所有的TR元素添加进去，并将他们从原来的表格中删除
 //碎片的子节点被放回到TBODY元素中，当使用appendChild并传递一个文档碎片的时候
 //最后添加的是碎片的所有子节点，并不是碎片本身
 var oFragment = document.createDocumentFragment();
 for(var i=0; i<aTRs.length; i++) {
  oFragment.appendChild(aTRs[i]);
 }
 
 oTBody.appendChild(oFragment);
 oTable.sortCol = iCol;
}
</script>

 

表格代码如下：

<table border="1" id="tblSort">
<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">
   Siblings
  </th>
 </tr>
</thead>

<tbody>
 <tr>
  <td>Smith</td>
  <td>John</td>
  <td>7/12/1978</td>
  <td>2</td>
 </tr>
 
 <tr>
  <td>Johnson</td>
  <td>Betty</td>
  <td>10/15/1977</td>
  <td>4</td>
 </tr>
 
 <tr>
  <td>Henderson</td>
  <td>Nathan</td>
  <td>2/25/1980</td>
  <td>1</td>
 </tr>
 
 <tr>
  <td>Williams</td>
  <td>James</td>
  <td>7/8/1973</td>
  <td>5</td>
 </tr>
 
 <tr>
  <td>Gilliam</td>
  <td>Michael</td>
  <td>7/22/1948</td>
  <td>1</td>
 </tr>
 
 <tr>
  <td>Walker</td>
  <td>Matthew</td>
  <td>1/14/2000</td>
  <td>3</td>
 </tr>
</tbody>
</table>