20赞

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

作者：惬听风吟jyy_802 | 2022-10-14 03:32

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

推荐阅读

程序员
bcrypt和随机生成的盐

如何解决《bcrypt和随机生成的盐》经验，为你挑选了1个好方法。 ... [详细]
程序员
NSNetworkManager.ResolveListener消息Android

如何解决《NSNetworkManager.ResolveListener消息Android》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在不弄乱布局的情况下为div添加边框？

如何解决《如何在不弄乱布局的情况下为div添加边框？》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么我们不能在java中用"this"关键字创建一个对象？

如何解决《为什么我们不能在java中用"this"关键字创建一个对象？》经验，为你挑选了0个好方法。 ... [详细]
程序员
ViewDoesNotExist即使它确实存在

如何解决《ViewDoesNotExist即使它确实存在》经验，为你挑选了1个好方法。 ... [详细]
程序员
Chrome与这个JS崩溃了

如何解决《Chrome与这个JS崩溃了》经验，为你挑选了1个好方法。 ... [详细]
程序员
不推荐使用<td>宽度,如何设置一行中单个单元格的宽度？

如何解决《不推荐使用<td>宽度,如何设置一行中单个单元格的宽度？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Java静态变量变为null

如何解决《Java静态变量变为null》经验，为你挑选了1个好方法。 ... [详细]
程序员
将调试视图与Windows服务一起使用

如何解决《将调试视图与Windows服务一起使用》经验，为你挑选了1个好方法。 ... [详细]
程序员
内联类构造函数,以避免vc内存崩溃

如何解决《内联类构造函数,以避免vc内存崩溃》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何处理两个重叠的Twitter Bootstrap模式

如何解决《如何处理两个重叠的TwitterBootstrap模式》经验，为你挑选了1个好方法。 ... [详细]
程序员
Android:使用服务,对话框等片段的预期用途

如何解决《Android:使用服务,对话框等片段的预期用途》经验，为你挑选了1个好方法。 ... [详细]
程序员
Robolectric和Gradle(Android工作室)的Android项目

如何解决《Robolectric和Gradle(Android工作室)的Android项目》经验，为你挑选了3个好方法。 ... [详细]
程序员
我想检查std_logic_vector是否包含负整数

如何解决《我想检查std_logic_vector是否包含负整数》经验，为你挑选了1个好方法。 ... [详细]
程序员
我们如何在Clojure中进行左右折叠？

如何解决《我们如何在Clojure中进行左右折叠？》经验，为你挑选了2个好方法。 ... [详细]
程序员
如何在当前单位的使用子句中添加单位

如何解决《如何在当前单位的使用子句中添加单位》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何以交互方式(可视化)解决SourceTree/git中的冲突

如何解决《如何以交互方式(可视化)解决SourceTree/git中的冲突》经验，为你挑选了2个好方法。 ... [详细]
程序员
如何创建长度由多次重复相同字符组成的字符串？

如何解决《如何创建长度由多次重复相同字符组成的字符串？》经验，为你挑选了2个好方法。 ... [详细]
程序员
例外:无法从依赖项生成etag

如何解决《例外:无法从依赖项生成etag》经验，为你挑选了1个好方法。 ... [详细]
程序员
在同一个应用程序中强制执行Android权限

如何解决《在同一个应用程序中强制执行Android权限》经验，为你挑选了1个好方法。 ... [详细]

惬听风吟jyy_802

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

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

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