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需再刷新一下页面才能执行]

您可能感兴趣的文章:

微信小程序中如何计算距离某个节日还有多少天
这篇文章主要给大家介绍了关于微信小程序中如何计算距离某个节日还有多少天的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
mui back 返回刷新页面的实例
下面小编就为大家分享一篇mui back 返回刷新页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
正则表达式删除JavaScript代码中的空格、注释和换行符
这篇文章主要介绍了正则表达式删除JavaScript代码中的空格、注释和换行符,需要的朋友可以参考下
2023-12-12
ajax如何实现页面局部跳转与结果返回
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，本篇文章给大家介绍ajax如何实现页面局部跳转与结果返回，感兴趣的朋友一起来学习
2015-08-08
基于RequireJS和JQuery的模块化编程——常见问题全面解析
下面小编就为大家带来一篇基于RequireJS和JQuery的模块化编程——常见问题全面解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考
2016-04-04
JS实现省市县三级下拉联动
这篇文章主要为大家详细介绍了JS实现省市县三级下拉联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-04-04
Bootstrap中datetimepicker使用小结
这篇文章主要为大家详细介绍了Bootstrap中datetimepicker的使用方法，一款功能强大的日期选择控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Javascript的各种节点操作实例演示代码
实例演示对javascript的节点的各种操作。包括hasChildNodes()，removeChild()，appendChild()，replaceChild()，insertBefore()，cloneNode()等
2012-06-06
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
本篇文章主要是对JS控件ASP.NET的treeview控件全选或者取消的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript Date对象详解及时间戳和时间的相互转换问题
这篇文章主要介绍了JavaScript Date对象详解及时间戳和时间的相互转换问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01