javascript表格排序(包括中文排序)
<html>
<head>
<script language="javascript">
function sortTable(tableId,iCol,dataType) {
var oTable = document.getElementById(tableId);
var oTbody = oTable.tBodies[0];
var oRows = oTbody.rows;
var oTrs = [];
for(var i=0;i<oRows.length;i++) {
oTrs[i] = oRows[i];
}
if(oTable.sortCol == iCol) {
oTrs.reverse();
} else {
oTrs.sort(generateCompareTRs(iCol,dataType));
}
var oFragment = document.createDocumentFragment();
for(var i=0;i<oTrs.length;i++) {
oFragment.appendChild(oTrs[i]);
}
oTbody.appendChild(oFragment);
oTable.sortCol = iCol;
}
function convert(oValue,dataType) {
switch(dataType) {
case "int":
return parseInt(oValue);
case "float":
return parseFloat(oValue);
case "date":
return new Date(Date.parse(oValue));
default:
return oValue;
}
}
function generateCompareTRs(iCol,dataType) {
return function compareTRs(oTR1,oTR2) {
var oValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,dataType);
var oValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,dataType);
if(dataType=="string") {
return oValue1.localeCompare(oValue2);
} else {
if(oValue1 < oValue2) {
return -1;
} else if (oValue1 > oValue2) {
return 1;
} else {
return 0;
}
}
}
}
</script>
</head>
<body>
<table id="myTable" border="1">
<thead>
<th onclick="sortTable('myTable',0,'string')">姓名</th>
<th onclick="sortTable('myTable',1,'string')">地名</th>
<th onclick="sortTable('myTable',2,'int')">价格</th>
<th onclick="sortTable('myTable',3,'string')">日期</th>
</thead>
<tbody>
<tr>
<td>张明强</td><td>泉州</td><td>544</td><td>2010-10-10</td>
</tr>
<tr>
<td>林水明</td><td>贵州</td><td>62</td><td>2011-10-10</td>
</tr>
<tr>
<td>严跃宁</td><td>山东</td><td>4369</td><td>2009-10-10</td>
</tr>
<tr>
<td>杨龙通</td><td>济南</td><td>123456</td><td>2010-09-09</td>
</tr>
<tr>
<td>陆文邦</td><td>北京</td><td>644</td><td>2020-10-10</td>
</tr>
<tr>
<td>阿 Q</td><td>江西</td><td>89</td><td>2008-10-10</td>
</tr>
<tr>
<td>郭靖</td><td>杭州</td><td>999</td><td>2010-11-11</td>
</tr>
<tr>
<td>一灯</td><td>安徽</td><td>369</td><td>2010-01-03</td>
</tr>
<tr>
<td>小胖子</td><td>黑龙江</td><td>44</td><td>2010-05-05</td>
</tr>
<tr>
<td>窑子</td><td>启元</td><td>744</td><td>2010-03-03</td>
</tr>
<tr>
<td>兰花儿</td><td>云南</td><td>7544</td><td>2013-07-07</td>
</tr>
<tr>
<td>喇嘛</td><td>西藏</td><td>66</td><td>2010-08-08</td>
</tr>
</tbody>
</table>
</body>
</html>
注意：localeCompare()可以处理中文排序问题，如果是字符串类型的话一定要传入string类型。
<head>
<script language="javascript">
function sortTable(tableId,iCol,dataType) {
var oTable = document.getElementById(tableId);
var oTbody = oTable.tBodies[0];
var oRows = oTbody.rows;
var oTrs = [];
for(var i=0;i<oRows.length;i++) {
oTrs[i] = oRows[i];
}
if(oTable.sortCol == iCol) {
oTrs.reverse();
} else {
oTrs.sort(generateCompareTRs(iCol,dataType));
}
var oFragment = document.createDocumentFragment();
for(var i=0;i<oTrs.length;i++) {
oFragment.appendChild(oTrs[i]);
}
oTbody.appendChild(oFragment);
oTable.sortCol = iCol;
}
function convert(oValue,dataType) {
switch(dataType) {
case "int":
return parseInt(oValue);
case "float":
return parseFloat(oValue);
case "date":
return new Date(Date.parse(oValue));
default:
return oValue;
}
}
function generateCompareTRs(iCol,dataType) {
return function compareTRs(oTR1,oTR2) {
var oValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,dataType);
var oValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,dataType);
if(dataType=="string") {
return oValue1.localeCompare(oValue2);
} else {
if(oValue1 < oValue2) {
return -1;
} else if (oValue1 > oValue2) {
return 1;
} else {
return 0;
}
}
}
}
</script>
</head>
<body>
<table id="myTable" border="1">
<thead>
<th onclick="sortTable('myTable',0,'string')">姓名</th>
<th onclick="sortTable('myTable',1,'string')">地名</th>
<th onclick="sortTable('myTable',2,'int')">价格</th>
<th onclick="sortTable('myTable',3,'string')">日期</th>
</thead>
<tbody>
<tr>
<td>张明强</td><td>泉州</td><td>544</td><td>2010-10-10</td>
</tr>
<tr>
<td>林水明</td><td>贵州</td><td>62</td><td>2011-10-10</td>
</tr>
<tr>
<td>严跃宁</td><td>山东</td><td>4369</td><td>2009-10-10</td>
</tr>
<tr>
<td>杨龙通</td><td>济南</td><td>123456</td><td>2010-09-09</td>
</tr>
<tr>
<td>陆文邦</td><td>北京</td><td>644</td><td>2020-10-10</td>
</tr>
<tr>
<td>阿 Q</td><td>江西</td><td>89</td><td>2008-10-10</td>
</tr>
<tr>
<td>郭靖</td><td>杭州</td><td>999</td><td>2010-11-11</td>
</tr>
<tr>
<td>一灯</td><td>安徽</td><td>369</td><td>2010-01-03</td>
</tr>
<tr>
<td>小胖子</td><td>黑龙江</td><td>44</td><td>2010-05-05</td>
</tr>
<tr>
<td>窑子</td><td>启元</td><td>744</td><td>2010-03-03</td>
</tr>
<tr>
<td>兰花儿</td><td>云南</td><td>7544</td><td>2013-07-07</td>
</tr>
<tr>
<td>喇嘛</td><td>西藏</td><td>66</td><td>2010-08-08</td>
</tr>
</tbody>
</table>
</body>
</html>
注意：localeCompare()可以处理中文排序问题，如果是字符串类型的话一定要传入string类型。