javascript table排序這個更簡單了，不用改變現在的表格結構

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript table排序這個更簡單了，不用改變現在的表格結構

編輯：關於JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>JavaScript實現可自定義排序的表格 - </TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<STYLE type=text/css>BODY { 
FONT-SIZE: 0.8em; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif 
} 
P { 
FONT-WEIGHT: bold; MARGIN-BOTTOM: 0px 
} 
.tableWidget_headerCell { 
BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8 
} 
.tableWigdet_headerCellOver { 
BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8 
} 
.tableWigdet_headerCellDown { 
BORDER-RIGHT: #aca899 1px solid; BORDER-LEFT: #fff 1px solid; CURSOR: pointer; BORDER-BOTTOM: #c5c2b2 3px solid; BACKGROUND-COLOR: #ece9d8 
} 
.tableWidget_headerCell { 
BORDER-TOP: #ece9d8 2px solid 
} 
.tableWigdet_headerCellOver { 
BORDER-TOP: #ffc83c 2px solid 
} 
.tableWidget TBODY .tableWidget_dataRollOver { 
BACKGROUND-COLOR: #fff 
} 
.tableWigdet_headerCellDown { 
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #ffc83c 2px solid; BORDER-LEFT: #aca899 1px solid; BACKGROUND-COLOR: #dbd8c5 
} 
.tableWidget TD { 
PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: #eae9e1 1px solid 
} 
.tableWidget TBODY { 
BACKGROUND-COLOR: #fff 
} 
.tableWidget { 
FONT-SIZE: 12px; WIDTH: 400px; FONT-FAMILY: arial 
} 
DIV.widget_tableDiv { 
BORDER-RIGHT: #aca899 1px solid; BORDER-TOP: #aca899 1px solid; OVERFLOW-Y: auto; BORDER-LEFT: #aca899 1px solid; WIDTH: 400px; BORDER-BOTTOM: #aca899 1px solid; HEIGHT: 200px 
} 
HTML > BODY DIV.widget_tableDiv { 
OVERFLOW: hidden; WIDTH: 400px 
} 
.tableWidget THEAD { 
POSITION: relative 
} 
.tableWidget THEAD TR { 
BOTTOM: 0px; POSITION: relative; TOP: 0px 
} 
.tableWidget .scrollingContent { 
OVERFLOW-Y: auto; WIDTH: 100% 
} 
</STYLE> 
 
<META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD> 
<BODY> 
 
 
<THEAD> 
 
Name 
Age 
Position 
Income 
Gender</THEAD> 
 
 
John 
37 
Managing director 
90.000 
Male 
 
Susan 
34 
Partner 
90.000 
Female 
 
David 
29 
Head of production 
70.000 
Male 
 
Laura 
29 
Head of marketing 
70.000 
Female 
 
Kate 
18 
Marketing 
50.000 
Female 
 
Mona 
21 
Marketing 
53.000 
Female 
 
Mike 
21 
Marketing 
53.000 
Male 
 
Mark 
25 
Production 
52.000 
Male 
 
Peter 
33 
Production 
55.000 
Male 
 
Jennifer 
24 
Production 
49.000 
Female 
 
David 
25 
Photography 
51.000 
Male 
 
Anna 
42 
Head of photography 
56.000 
Female 
 
Rita 
30 
Photography 
54.000 
Female 
 
Magnus 
25 
Freelancer 
65.000 
Male 
 
Johnny 
29 
Freelancer 
63.000 
Male

</BODY></HTML>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:預加載css或javascript的js代碼
下一頁:js 禁止選擇功能實現代碼(兼容IE/Firefox)

關於JavaScript

使用純javascript實現經典掃雷游戲: 很久以前寫的當時都沒寫注釋的剛加上了（尼瑪，好多自己都不認識了 ... ）不足的地方就是本來想
在b/s開發中經常用到的javascript技術: 在b/s開發中經常用到的javascript技術一、驗證類1、數字驗證內 1.1 整數
Highcharts學習之坐標軸: 前言所有的圖表除了餅圖都有X軸和Y軸，默認情況下，x軸顯示在圖表的底部，y軸顯示在左側（多個y軸時可

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章