javascript table排序这个更简单了，不用改变现在的表格结构

网络编程发布日期：2026/1/17 浏览次数：1

正在浏览：javascript table排序这个更简单了，不用改变现在的表格结构

<!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代码

下一篇：改变javascript函数内部this指针指向的三种方法

javascript table排序 这个更简单了，不用改变现在的表格结构

javascript table排序这个更简单了，不用改变现在的表格结构