javascript 学习笔记之表格排序

最近几天比较忙，一直没来写小博，今天周末，更新一把小博~~把最近的学习JS的东西，写出来，若干年后，看自己的成长史，岂不快哉？？废话不多说，见代码

<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>