本文实例讲述了JavaScript实现表格点击排序的方法。分享给大家供大家参考。具体分析如下:
这里实现基于JS的表格点击排序效果,可以根据表格内的数据大小自动按顺序排列,股票网站常会见到这种功能。
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
表格排序
@H_404_9@TABLE {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid;
BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid;
border-spacing: 0px; cell-spacing: 0px
}
TD {
PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt;
PADDING-BOTTOM: 2px; PADDING-TOP: 2px;
FONT-FAMILY: Arial,Helvetica,sans-serif; WHITE-SPACE: nowrap
}
TH {
PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt;
PADDING-BOTTOM: 2px; PADDING-TOP: 2px;
FONT-FAMILY: Arial,sans-serif; WHITE-SPACE: nowrap
}
TD.numeric {
TEXT-ALIGN: right
}
TH {
BACKGROUND-COLOR: #c0c0c0
}
TH.mainHeader {
COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left
}
TH A {
COLOR: #000080; TEXT-DECORATION: none
}
TH A:visited {
COLOR: #000080
}
TH A:active {
COLOR: #800000; TEXT-DECORATION: underline
}
TH A:hover {
COLOR: #800000; TEXT-DECORATION: underline
}
TR.alternateRow {
BACKGROUND-COLOR: #e0e0e0
}
TD.sortedColumn {
BACKGROUND-COLOR: #f0f0f0
}
TH.sortedColumn {
BACKGROUND-COLOR: #b0b0b0
}
TR.alternateRow TD.sortedColumn {
BACKGROUND-COLOR: #d0d0d0
}
NFL 2001 Offensive Stats | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
Arizona | 16 | 4898 | 306.1 | 1449 | 90.6 | 3449 | 215.6 | 295 | 18.4 | |
Atlanta | 16 | 5070 | 316.9 | 1773 | 110.8 | 3297 | 206.1 | 291 | 18.2 | |
Detroit | 16 | 4994 | 312.1 | 1398 | 87.4 | 3596 | 224.8 | 270 | 16.9 | |
Jacksonville | 16 | 4840 | 302.5 | 1600 | 100.0 | 3240 | 202.5 | 294 | 18.4 | |
Kansas City | 16 | 5673 | 354.6 | 2008 | 125.5 | 3665 | 229.1 | 320 | 20.0 | |
Miami | 16 | 4821 | 301.3 | 1664 | 104.0 | 3157 | 197.3 | 344 | 21.5 | |
Minnesota | 16 | 5006 | 333.7 | 1523 | 101.5 | 3483 | 232.2 | 287 | 19.1 | |
New England | 16 | 4882 | 305.1 | 1793 | 112.1 | 3089 | 193.1 | 371 | 23.2 | |
New Orleans | 16 | 5226 | 326.6 | 1712 | 107.0 | 3514 | 219.6 | 333 | 20.8 | |
New York Giants | 16 | 5335 | 333.4 | 1777 | 111.1 | 3558 | 222.4 | 294 | 18.4 |