📄 test1.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<STYLE type=text/css>.arrow {
PADDING-RIGHT: 0px;
FONT-SIZE: 16px;
OVERFLOW: hidden; WIDTH: 15px;
COLOR: black;
FONT-FAMILY: webdings;
HEIGHT: 50px
}
</STYLE>
<title>table 标题排序</title>
<script language="javascript">
//varaiables for creating up arrow and down arrow.
var upArrow,downArrow;
var columnIndex,lastIndex,isDescending;
var type;
function sortTable(eventclick,id,colIndex,sDataType) {
if(upArrow == undefined){
initSortArrows();
}
//get the TD element.
var cell = eventclick.srcElement;
/*
是事件初始目标的html元素对象引用,因为事件通过元素容器层次冒泡,
可以在任一层进行处理,所以由一个属性指向产生初始事件的元素是很有帮助的.
有了元素的引用,就可以读/写改元素的属性,并调用他的任何方法
*/
//alert(cell.tagName); // show th
//alert(cell.parentElement.tagName); //tr
if(cell.tagName == "SPAN"){
//alert(1);
cell = cell.parentElement; //get the tr element.
}else if (cell.type == undefined){
type = "String";
} else{
type = cell.type;
}
var thead = cell.parentElement;// get tr element
//set the current index.
columnIndex = colIndex;
//set the direction. 设置方向
if(columnIndex == lastIndex){
if(isDescending == true){
isDescending = false;
}else{
isDescending = true;
}
}else{
isDescending = true;
}
// Get the table section to sort.
var tblEl = document.getElementById(id);
// Set up an array of reverse sort flags, if not done already.
if (tblEl.reverseSort == null){
tblEl.reverseSort = new Array();
}
// If this column was the last one sorted, reverse its sort direction.
if (colIndex == tblEl.lastColumn){
tblEl.reverseSort[colIndex] = !tblEl.reverseSort[colIndex];
}
// Remember this column as the last one sorted.
tblEl.lastColumn = colIndex;
// Set the table display style to "none" - necessary for Netscape 6
// browsers.
var oldDsply = tblEl.style.display;
tblEl.style.display = "none";
// Sort the rows based on the content of the specified column using a
// selection sort.
var tmpEl;
var i, j;
var minVal, minIdx;
var testVal;
var cmp;
for (i = 0; i < tblEl.rows.length - 1; i++) {
// Assume the current row has the minimum value.
minIdx = i;
minVal = getTextValue(tblEl.rows[i].cells[colIndex]);
// Search the rows that follow the current one for a smaller value.
for (j = i + 1; j < tblEl.rows.length; j++) {
testVal = getTextValue(tblEl.rows[j].cells[colIndex]);
cmp = compareValues(minVal, testVal,sDataType);
// Reverse order?
if (tblEl.reverseSort[colIndex])
cmp = -cmp;
// If this row has a smaller value than the current minimum, remember its
// position and update the current minimum value.
if (cmp > 0) {
minIdx = j;
minVal = testVal;
}
}
// By now, we have the row with the smallest value. Remove it from the
// table and insert it before the current row.
if (minIdx > i) {
tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
tblEl.insertBefore(tmpEl, tblEl.rows[i]);
}
}
//////////////////////////////////////
//first time sorting.
if(lastIndex == undefined){
//alert(cell.tagName);// get th element
cell.appendChild(downArrow.cloneNode(true));
isDescending = true;
}else if(colIndex != lastIndex){
thead.cells[lastIndex].removeChild(thead.cells[lastIndex].children[0]);
cell.appendChild(downArrow.cloneNode(true));
}else if(colIndex == lastIndex){
cell.removeChild(cell.children[0]);
//添加上下箭头图片
if(isDescending==true){
cell.appendChild(downArrow.cloneNode(true));
}else{
cell.appendChild(upArrow.cloneNode(true));
}
}
//set the last sorted column index.
lastIndex = colIndex;
/////////////////////////////////////////////
// Restore the table's display style.
tblEl.style.display = oldDsply;
return false;
}
//-----------------------------------------------------------------------------
// Functions to get and compare values during a sort.
//-----------------------------------------------------------------------------
// This code is necessary for browsers that don't reflect the DOM constants
// (like IE).
if (document.ELEMENT_NODE == null) {
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
}
function getTextValue(el) {
var i;
var s;
// Find and concatenate the values of all text nodes contained within the
// element.
s = "";
for (i = 0; i < el.childNodes.length; i++)
if (el.childNodes[i].nodeType == document.TEXT_NODE)
s += el.childNodes[i].nodeValue;
else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&
el.childNodes[i].tagName == "BR")
s += " ";
else
// Use recursion to get text within sub-elements.
s += getTextValue(el.childNodes[i]);
return normalizeString(s);
}
function compareValues(v1, v2, sDataType) {
var f1, f2;
// If the values are numeric, convert them to floats.
// If the values are integer, convert them to int.
// If the values are date, convert them to date.
// If the values are string, convert them to string.
f1 = convert(v1,sDataType);
f2 = convert(v2,sDataType);
if( sDataType == 'string' ){
return f1.localeCompare(f2);
}
if (!isNaN(f1) && !isNaN(f2)) {
v1 = f1;
v2 = f2;
}
// Compare the two values.
if (v1 == v2){
//alert("相等");
return 0;
}
if (v1 > v2){
//alert("大于");
return 1;
}
//alert("小于");
return -1;
}
// Regular expressions for normalizing white space.
var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");
function normalizeString(s) {
s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.
s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space.
return s;
}
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();
}
}
//varaiables for creating up arrow and down arrow.
function initSortArrows(){
//create a span element.
upArrow = document.createElement("SPAN");
var node6 = document.createTextNode("6"); // 6: 向上箭头
upArrow.appendChild(node6);
//apply css class to show '5' as an arrow.
upArrow.className = "arrow";
//creating span tag for downArrow.
downArrow = document.createElement("SPAN");
var node5 = document.createTextNode("5"); //5:向下箭头
downArrow.appendChild(node5);
downArrow.className = "arrow";
}
</script>
</head>
<body>
<table border=1>
<thead>
<tr >
<th style="CURSOR: hand;" onclick = "return sortTable(event,'tbl2',0,'string')"> 名字333333333 </th>
<th style="CURSOR: hand;" onclick = "return sortTable(event,'tbl2',1,'int')"> aa </th>
<th style="CURSOR: hand;" onclick = "return sortTable(event,'tbl2',2,'float')">Distance(mi.) </th>
<th style="CURSOR: hand;" onclick = "return sortTable(event,'tbl2',3,'float')">Rotation (hrs.)</th>
<th style="CURSOR: hand;" onclick = "return sortTable(event,'tbl2',4,'float')">Period (days) </th>
<th style="CURSOR: hand;" onclick = "return sortTable(event,'tbl2',5,'date')"> 日期</th>
</tr>
</thead>
<tbody id=tbl2>
<tr>
<TD style="TEXT-ALIGN: left">辽A888</TD>
<TD style="TEXT-ALIGN: right">223</TD>
<TD style="TEXT-ALIGN: right">36.0</TD>
<TD style="TEXT-ALIGN: right">1407.6</TD>
<TD style="TEXT-ALIGN: right">88</TD>
<td>2008-11-12</td>
</TR>
<tr>
<TD style="TEXT-ALIGN: left">辽B345</TD>
<TD style="TEXT-ALIGN: right">7521</TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">225</TD>
<td>2008-12-12</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">辽C0877</TD>
<TD style="TEXT-ALIGN: right">3032</TD>
<TD style="TEXT-ALIGN: right">887.0</TD>
<TD style="TEXT-ALIGN: right">1407.6</TD>
<TD style="TEXT-ALIGN: right">88</TD>
<td>2008-08-12</td>
</TR>
<tr>
<TD style="TEXT-ALIGN: left"><a href="ss">aa</a></TD>
<TD style="TEXT-ALIGN: right"></TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">225</TD>
<td>2008年05月12</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">辽C0877</TD>
<TD style="TEXT-ALIGN: right"></TD>
<TD style="TEXT-ALIGN: right">33.0</TD>
<TD style="TEXT-ALIGN: right">1407.6</TD>
<TD style="TEXT-ALIGN: right">88</TD>
<td>2008年08月12</td>
</TR>
<tr>
<TD style="TEXT-ALIGN: left">辽C0877</TD>
<TD style="TEXT-ALIGN: right">7521</TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">225</TD>
<td>2008年06月12</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">辽CD0877</TD>
<TD style="TEXT-ALIGN: right"></TD>
<TD style="TEXT-ALIGN: right">36.0</TD>
<TD style="TEXT-ALIGN: right">1407.6</TD>
<TD style="TEXT-ALIGN: right">13</TD>
<td>2008年01月12</td>
</TR>
<tr>
<TD style="TEXT-ALIGN: left">辽C0877</TD>
<TD style="TEXT-ALIGN: right">455</TD>
<TD style="TEXT-ALIGN: right">4.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">23</TD>
<td>2008年08月12</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">辽C0877</TD>
<TD style="TEXT-ALIGN: right">7521</TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">225</TD>
<td>2008-07-12</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">辽CD0877</TD>
<TD style="TEXT-ALIGN: right">3032</TD>
<TD style="TEXT-ALIGN: right">36.0</TD>
<TD style="TEXT-ALIGN: right">1407.6</TD>
<TD style="TEXT-ALIGN: right">88</TD>
<td>2008-05-12</td>
</TR>
<tr>
<TD style="TEXT-ALIGN: left">辽C0877</TD>
<TD style="TEXT-ALIGN: right">7521</TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">225</TD>
<td>2008-02-12</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">辽C08丢份儿77</TD>
<TD style="TEXT-ALIGN: right">7521</TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">225</TD>
<td>20080312</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">北京ef饿e</TD>
<TD style="TEXT-ALIGN: right">3032</TD>
<TD style="TEXT-ALIGN: right">36.0</TD>
<TD style="TEXT-ALIGN: right">1407.6</TD>
<TD style="TEXT-ALIGN: right">33</TD>
<td>20080412</td>
</TR>
<tr>
<TD style="TEXT-ALIGN: left">辽C0877份儿饭</TD>
<TD style="TEXT-ALIGN: right">7521</TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">234</TD>
<td>20080812</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">辽C0877发出</TD>
<TD style="TEXT-ALIGN: right">7521</TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">456</TD>
<td>2008-08-12</td>
</tr>
<tr>
<TD style="TEXT-ALIGN: left">辽宁省长h3334</TD>
<TD style="TEXT-ALIGN: right">3032</TD>
<TD style="TEXT-ALIGN: right">36.0</TD>
<TD style="TEXT-ALIGN: right">1407.6</TD>
<TD style="TEXT-ALIGN: right">88</TD>
<td>20080812</td>
</TR>
<tr>
<TD style="TEXT-ALIGN: left">中国人23bbee</TD>
<TD style="TEXT-ALIGN: right">7521</TD>
<TD style="TEXT-ALIGN: right">67.2</TD>
<TD style="TEXT-ALIGN: right">5832.5</TD>
<TD style="TEXT-ALIGN: right">223</TD>
<td>2008-08-12</td>
</tr>
</tbody>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -