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

更新时间：2010年04月23日 19:20:52 作者：

另外一个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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

简单JS代码压缩器
简单JS代码压缩器...
2006-10-10
JavaScript 判断浏览器是否是IE
这篇文章主要介绍了JavaScript 判断浏览器是否是IE，帮助大家更好的理解和学习前端知识，感兴趣的朋友可以了解下
2021-02-02
静态页面也可以实现预览列表不同的显示方式
静态页面也可以实现预览列表不同的显示方式...
2006-10-10
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
这篇文章主要介绍了js获取对象,数组所有属性键值(key)和对应值(value)的方法,涉及javascript对于对象、数组键名与键值遍历相关操作技巧,需要的朋友可以参考下
2019-06-06
JavaScript prototype属性详解
这篇文章主要为大家详细介绍了JavaScript prototype属性,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
JavaScript实现弹出模态窗体并接受传值的方法
这篇文章主要介绍了JavaScript实现弹出模态窗体并接受传值的方法,涉及JavaScript模态窗体的实现及基于URL的传值操作技巧,需要的朋友可以参考下
2016-02-02
javascript实现函数柯里化与反柯里化过程解析
这篇文章主要介绍了javascript实现函数柯里化与反柯里化过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
JavaScript实现手写promise的示例代码
promise 作为前端开发中常用的函数，解决了 js 处理异步时回调地狱的问题，大家应该也不陌生了，今天来学习一下 promise 的实现过程吧
2023-04-04
JSQL 一个 web DB 的封装
当然随着HTML5的普及，web DB 已经是大势所趋了
2010-05-05
微信小程序实现小型计算器
这篇文章主要为大家详细
介绍了微信小程序实现小型计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09