软件开发培训班 >> 编程开发 >> JavaScript

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> 
<SCRIPT type=text/javascript> 
/* 
(C) www.dhtmlgoodies.com, October 2005 
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. 
Terms of use: 
You are free to use this script as long as the copyright message is kept intact. However, you may not 
redistribute, sell or repost it without our permission. 
Thank you! 
www.dhtmlgoodies.com 
Alf Magne Kalleland 
*/ 
var tableWidget_tableCounter = 0; 
var tableWidget_arraySort = new Array(); 
var tableWidget_okToSort = true; 
var activeColumn = new Array(); 
var arrowImagePath = "images/"; // Path to arrow images 
function addEndCol(obj) 
{ 
if(document.all)return; 
var rows = obj.getElementsByTagName(TR); 
for(var no=0;no<rows.length;no++){ 
var cell = rows[no].insertCell(-1); 
cell.innerHTML =  ; 
cell.style.width = 13px; 
cell.width = 13; 
} 
} 
function highlightTableHeader() 
{ 
this.className=tableWigdet_headerCellOver; 
if(document.all){ // I.E fix for "jumping" headings 
var divObj = this.parentNode.parentNode.parentNode.parentNode; 
this.parentNode.style.top = divObj.scrollTop + px; 
} 
} 
function deHighlightTableHeader() 
{ 
this.className=tableWidget_headerCell; 
} 
function mousedownTableHeader() 
{ 
this.className=tableWigdet_headerCellDown; 
if(document.all){ // I.E fix for "jumping" headings 
var divObj = this.parentNode.parentNode.parentNode.parentNode; 
this.parentNode.style.top = divObj.scrollTop + px; 
} 
} 
function sortNumeric(a,b){ 
a = a.replace(/,/,.); 
b = b.replace(/,/,.); 
a = a.replace(/[^\d\-\.\/]/g,); 
b = b.replace(/[^\d\-\.\/]/g,); 
if(a.indexOf(/)>=0)a = eval(a); 
if(b.indexOf(/)>=0)b = eval(b); 
return a/1 - b/1; 
} 
function sortString(a, b) { 
if ( a.toUpperCase() < b.toUpperCase() ) return -1; 
if ( a.toUpperCase() > b.toUpperCase() ) return 1; 
return 0; 
} 
function cancelTableWidgetEvent() 
{ 
return false; 
} 
function sortTable() 
{ 
if(!tableWidget_okToSort)return; 
tableWidget_okToSort = false; 
/* Getting index of current column */ 
var obj = this; 
var indexThis = 0; 
while(obj.previousSibling){ 
obj = obj.previousSibling; 
if(obj.tagName==TD)indexThis++; 
} 
var images = this.getElementsByTagName(IMG); 
if(this.getAttribute(direction) || this.direction){ 
direction = this.getAttribute(direction); 
if(navigator.userAgent.indexOf(Opera)>=0)direction = this.direction; 
if(direction==ascending){ 
direction = descending; 
this.setAttribute(direction,descending); 
this.direction = descending; 
}else{ 
direction = ascending; 
this.setAttribute(direction,ascending); 
this.direction = ascending; 
} 
}else{ 
direction = ascending; 
this.setAttribute(direction,ascending); 
this.direction = ascending; 
} 
if(direction==descending){ 
images[0].style.display=inline; 
images[0].style.visibility=visible; 
images[1].style.display=none; 
}else{ 
images[1].style.display=inline; 
images[1].style.visibility=visible; 
images[0].style.display=none; 
} 
var tableObj = this.parentNode.parentNode.parentNode; 
var tBody = tableObj.getElementsByTagName(TBODY)[0]; 
var widgetIndex = tableObj.id.replace(/[^\d]/g,); 
var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String 
if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){ 
var images = activeColumn[widgetIndex].getElementsByTagName(IMG); 
images[0].style.display=none; 
images[1].style.display=inline; 
images[1].style.visibility = hidden; 
if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute(direction); 
} 
activeColumn[widgetIndex] = this; 
var cellArray = new Array(); 
var cellObjArray = new Array(); 
for(var no=1;no<tableObj.rows.length;no++){ 
var content= tableObj.rows[no].cells[indexThis].innerHTML+; 
cellArray.push(content); 
cellObjArray.push(tableObj.rows[no].cells[indexThis]); 
} 
if(sortMethod==N){ 
cellArray = cellArray.sort(sortNumeric); 
}else{ 
cellArray = cellArray.sort(sortString); 
} 
if(direction==descending){ 
for(var no=cellArray.length;no>=0;no--){ 
for(var no2=0;no2<cellObjArray.length;no2++){ 
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute(allreadySorted)){ 
cellObjArray[no2].setAttribute(allreadySorted,1); 
tBody.appendChild(cellObjArray[no2].parentNode); 
} 
} 
} 
}else{ 
for(var no=0;no<cellArray.length;no++){ 
for(var no2=0;no2<cellObjArray.length;no2++){ 
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute(allreadySorted)){ 
cellObjArray[no2].setAttribute(allreadySorted,1); 
tBody.appendChild(cellObjArray[no2].parentNode); 
} 
} 
} 
} 
for(var no2=0;no2<cellObjArray.length;no2++){ 
cellObjArray[no2].removeAttribute(allreadySorted); 
} 
tableWidget_okToSort = true; 
} 
function initTableWidget(objId,width,height,sortArray) 
{ 
width = width + ; 
height = height + ; 
var obj = document.getElementById(objId); 
obj.parentNode.className=widget_tableDiv; 
if(navigator.userAgent.indexOf(MSIE)>=0){ 
obj.parentNode.style.overflowY = auto; 
} 
tableWidget_arraySort[tableWidget_tableCounter] = sortArray; 
if(width.indexOf(%)>=0){ 
obj.style.width = width; 
obj.parentNode.style.width = width; 
}else{ 
obj.style.width = width + px; 
obj.parentNode.style.width = width + px; 
} 
if(height.indexOf(%)>=0){ 
//obj.style.height = height; 
obj.parentNode.style.height = height; 
}else{ 
//obj.style.height = height + px; 
obj.parentNode.style.height = height + px; 
} 
obj.id = tableWidget + tableWidget_tableCounter; 
addEndCol(obj); 
obj.cellSpacing = 0; 
obj.cellPadding = 0; 
obj.className=tableWidget; 
var tHead = obj.getElementsByTagName(THEAD)[0]; 
var cells = tHead.getElementsByTagName(TD); 
for(var no=0;no<cells.length;no++){ 
cells[no].className = tableWidget_headerCell; 
cells[no].onselectstart = cancelTableWidgetEvent; 
if(no==cells.length-1){ 
cells[no].style.borderRight = 0px; 
} 
if(sortArray[no]){ 
cells[no].onmouseover = highlightTableHeader; 
cells[no].onmouseout = deHighlightTableHeader; 
cells[no].onmousedown = mousedownTableHeader; 
cells[no].onmouseup = highlightTableHeader; 
cells[no].onclick = sortTable; 
var img = document.createElement(IMG); 
img.src = arrowImagePath + arrow_up.gif; 
cells[no].appendChild(img); 
img.style.visibility = hidden; 
var img = document.createElement(IMG); 
img.src = arrowImagePath + arrow_down.gif; 
cells[no].appendChild(img); 
img.style.display = none; 
}else{ 
cells[no].style.cursor = default; 
} 
} 
var tBody = obj.getElementsByTagName(TBODY)[0]; 
if(document.all && navigator.userAgent.indexOf(Opera)<0){ 
tBody.className=scrollingContent; 
tBody.style.display=block; 
}else{ 
tBody.className=scrollingContent; 
if(tBody.offsetHeight>(tBody.parentNode.parentNode.offsetHeight - 50)) { 
tBody.style.height = (obj.parentNode.clientHeight-tHead.offsetHeight) + px; 
}else{ 
tBody.style.overflow=hidden; 
} 
if(navigator.userAgent.indexOf(Opera)>=0){ 
obj.parentNode.style.overflow = auto; 
} 
} 
for(var no=1;no<obj.rows.length;no++){ 
obj.rows[no].onmouseover = highlightDataRow; 
obj.rows[no].onmouseout = deHighlightDataRow; 
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */ 
if(sortArray[no2] && sortArray[no2]==N)obj.rows[no].cells[no2].style.textAlign=right; 
} 
} 
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */ 
if(sortArray[no2] && sortArray[no2]==N)obj.rows[0].cells[no2].style.textAlign=right; 
} 
tableWidget_tableCounter++; 
} 
function highlightDataRow() 
{ 
if(navigator.userAgent.indexOf(Opera)>=0)return; 
this.className=tableWidget_dataRollOver; 
if(document.all){ // I.E fix for "jumping" headings 
var divObj = this.parentNode.parentNode.parentNode; 
var tHead = divObj.getElementsByTagName(TR)[0]; 
tHead.style.top = divObj.scrollTop + px; 
} 
} 
function deHighlightDataRow() 
{ 
if(navigator.userAgent.indexOf(Opera)>=0)return; 
this.className=null; 
if(document.all){ // I.E fix for "jumping" headings 
var divObj = this.parentNode.parentNode.parentNode; 
var tHead = divObj.getElementsByTagName(TR)[0]; 
tHead.style.top = divObj.scrollTop + px; 
} 
} 
</SCRIPT> 
<META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD> 
<BODY> 
<DIV class=widget_tableDiv> 
<TABLE id=myTable> 
<THEAD> 
<TR> 
<TD>Name</TD> 
<TD>Age</TD> 
<TD>Position</TD> 
<TD>Income</TD> 
<TD>Gender</TD></TR></THEAD> 
<TBODY class=scrollingContent> 
<TR> 
<TD>John</TD> 
<TD>37</TD> 
<TD>Managing director</TD> 
<TD>90.000</TD> 
<TD>Male</TD></TR> 
<TR> 
<TD>Susan</TD> 
<TD>34</TD> 
<TD>Partner</TD> 
<TD>90.000</TD> 
<TD>Female</TD></TR> 
<TR> 
<TD>David</TD> 
<TD>29</TD> 
<TD>Head of production</TD> 
<TD>70.000</TD> 
<TD>Male</TD></TR> 
<TR> 
<TD>Laura</TD> 
<TD>29</TD> 
<TD>Head of marketing</TD> 
<TD>70.000</TD> 
<TD>Female</TD></TR> 
<TR> 
<TD>Kate</TD> 
<TD>18</TD> 
<TD>Marketing</TD> 
<TD>50.000</TD> 
<TD>Female</TD></TR> 
<TR> 
<TD>Mona</TD> 
<TD>21</TD> 
<TD>Marketing</TD> 
<TD>53.000</TD> 
<TD>Female</TD></TR> 
<TR> 
<TD>Mike</TD> 
<TD>21</TD> 
<TD>Marketing</TD> 
<TD>53.000</TD> 
<TD>Male</TD></TR> 
<TR> 
<TD>Mark</TD> 
<TD>25</TD> 
<TD>Production</TD> 
<TD>52.000</TD> 
<TD>Male</TD></TR> 
<TR> 
<TD>Peter</TD> 
<TD>33</TD> 
<TD>Production</TD> 
<TD>55.000</TD> 
<TD>Male</TD></TR> 
<TR> 
<TD>Jennifer</TD> 
<TD>24</TD> 
<TD>Production</TD> 
<TD>49.000</TD> 
<TD>Female</TD></TR> 
<TR> 
<TD>David</TD> 
<TD>25</TD> 
<TD>Photography</TD> 
<TD>51.000</TD> 
<TD>Male</TD></TR> 
<TR> 
<TD>Anna</TD> 
<TD>42</TD> 
<TD>Head of photography</TD> 
<TD>56.000</TD> 
<TD>Female</TD></TR> 
<TR> 
<TD>Rita</TD> 
<TD>30</TD> 
<TD>Photography</TD> 
<TD>54.000</TD> 
<TD>Female</TD></TR> 
<TR> 
<TD>Magnus</TD> 
<TD>25</TD> 
<TD>Freelancer</TD> 
<TD>65.000</TD> 
<TD>Male</TD></TR> 
<TR> 
<TD>Johnny</TD> 
<TD>29</TD> 
<TD>Freelancer</TD> 
<TD>63.000</TD> 
<TD>Male</TD></TR></TBODY></TABLE></DIV> 
<SCRIPT type=text/javascript> 
initTableWidget(myTable,500,250,Array(S,N,false,N,S)); 
</SCRIPT>

</BODY></HTML>

技术文章快速查找

图片完美缩放

Prototype源码浅析 String部分(四)之补充

JavaScript转换农历类实现及调用方法

jQuery学习笔记之jQuery的DOM操作

JQuery 文本框使用小结

JavaScript Title、alt提示（Tips）实现源码解读

用JS写的一个TableView控件代码

借助JavaScript脚本判断浏览器Flash Player信息的方法

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

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

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