zoukankan
html css js c++ java
Sort Table
代码如下:
<html><HEAD><TITLE>sort table</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css>a { color:#000000; font-weight: bold; text-decoration: none;}</STYLE> <SCRIPT> addEvent(window, "load", sortables_init); var SORT_COLUMN_INDEX; function sortables_init() { // Find all tables with class sortable and make them sortable if (!document.getElementsByTagName) return; tbls = document.getElementsByTagName("table"); for (ti=0;ti<tbls.length;ti++) { thisTbl = tbls[ti]; if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) { //initTable(thisTbl.id); ts_makeSortable(thisTbl); } } } function ts_makeSortable(table) { if (table.rows && table.rows.length > 0) { var firstRow = table.rows[0]; } if (!firstRow) return; // We have a first row: assume it's the header, and make its contents clickable links for (var i=0;i<firstRow.cells.length;i++) { var cell = firstRow.cells[i]; var txt = ts_getInnerText(cell); cell.innerHTML = '<a href="#" class="sortheader" '+ 'onclick="ts_resortTable(this, '+i+');return false;">' + txt+'<span class="sortarrow"> </span></a>'; } } function ts_getInnerText(el) { if (typeof el == "string") return el; if (typeof el == "undefined") { return el }; if (el.innerText) return el.innerText; //Not needed but it is faster var str = ""; var cs = el.childNodes; var l = cs.length; for (var i = 0; i < l; i++) { switch (cs[i].nodeType) { case 1: //ELEMENT_NODE str += ts_getInnerText(cs[i]); break; case 3: //TEXT_NODE str += cs[i].nodeValue; break; } } return str; } function ts_resortTable(lnk,clid) { // get the span var span; for (var ci=0;ci<lnk.childNodes.length;ci++) { if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci]; } var spantext = ts_getInnerText(span); var td = lnk.parentNode; var column = clid || td.cellIndex; var table = getParent(td,'TABLE'); // Work out a type for the column if (table.rows.length <= 1) return; var itm = ts_getInnerText(table.rows[1].cells[column]); sortfn = ts_sort_caseinsensitive; if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date; if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date; if (itm.match(/^[?]/)) sortfn = ts_sort_currency; if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric; SORT_COLUMN_INDEX = column; var firstRow = new Array(); var newRows = new Array(); for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; } for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; } newRows.sort(sortfn); if (span.getAttribute("sortdir") == 'down') { ARROW = ' ↑'; newRows.reverse(); span.setAttribute('sortdir','up'); } else { ARROW = ' ↓'; span.setAttribute('sortdir','down'); } // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones // don't do sortbottom rows for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);} // do sortbottom rows only for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);} // Delete any other arrows there may be showing var allspans = document.getElementsByTagName("span"); for (var ci=0;ci<allspans.length;ci++) { if (allspans[ci].className == 'sortarrow') { if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us? allspans[ci].innerHTML = ' '; } } } span.innerHTML = ARROW; } function getParent(el, pTagName) { if (el == null) return null; else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase return el; else return getParent(el.parentNode, pTagName); } function ts_sort_date(a,b) { // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]); bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]); if (aa.length == 10) { dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2); } else { yr = aa.substr(6,2); if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; } dt1 = yr+aa.substr(3,2)+aa.substr(0,2); } if (bb.length == 10) { dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2); } else { yr = bb.substr(6,2); if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; } dt2 = yr+bb.substr(3,2)+bb.substr(0,2); } if (dt1==dt2) return 0; if (dt1<dt2) return -1; return 1; } function ts_sort_currency(a,b) { aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,''); bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,''); return parseFloat(aa) - parseFloat(bb); } function ts_sort_numeric(a,b) { aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX])); if (isNaN(aa)) aa = 0; bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); if (isNaN(bb)) bb = 0; return aa-bb; } function ts_sort_caseinsensitive(a,b) { aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase(); bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase(); if (aa==bb) return 0; if (aa<bb) return -1; return 1; } function ts_sort_default(a,b) { aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]); bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]); if (aa==bb) return 0; if (aa<bb) return -1; return 1; } function addEvent(elm, evType, fn, useCapture) // addEvent and removeEvent // cross-browser event handling for IE5+, NS6 and Mozilla // By Scott Andrew { if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent){ var r = elm.attachEvent("on"+evType, fn); return r; } else { alert("Handler could not be removed"); } } </SCRIPT> </HEAD> <BODY> <TABLE class=sortable id=mytable cellSpacing=3 cellPadding=0 width=481 border=1> <TBODY> <TR> <TH width=165><A class=sortheader onclick="ts_resortTable(this, 0);return false;" href="#">Name<SPAN class=sortarrow></SPAN></A></TH> <TH width=101><A class=sortheader onclick="ts_resortTable(this, 1);return false;" href="#">Salary<SPAN class=sortarrow></SPAN></A></TH> <TH align=middle width=101><A class=sortheader onclick="ts_resortTable(this, 2);return false;" href="#">Extension<SPAN class=sortarrow></SPAN></A></TH> <TH align=middle width=99><A class=sortheader onclick="ts_resortTable(this, 3);return false;" href="#">Start date<SPAN class=sortarrow></SPAN></A></TH></TR> <TR> <TD>Bloggs, Fred</TD> <TD>$12000.00</TD> <TD align=middle>1353</TD> <TD align=middle>18/08/2003</TD></TR> <TR> <TD>Turvey, Kevin</TD> <TD>$191200.00</TD> <TD align=middle>2342</TD> <TD align=middle>02/05/1979</TD></TR> <TR> <TD>Mbogo, Arnold</TD> <TD>$32010.12</TD> <TD align=middle>2755</TD> <TD align=middle>09/08/1998</TD></TR> <TR> <TD>Shakespeare, Bill</TD> <TD>$122000.00</TD> <TD align=middle>3211</TD> <TD align=middle>12/11/1961</TD></TR> <TR> <TD>Shakespeare, Hamnet</TD> <TD>$9000</TD> <TD align=middle>9005</TD> <TD align=middle>01/01/2002</TD></TR> <TR> <TD>Fitz, Marvin</TD> <TD>$3300</TD> <TD align=middle>5554</TD> <TD align=middle>22/05/1995</TD></TR></TBODY></TABLE> <script type="text/javascript"> <!-- var $ = document.getElementById; var htmlStr = ""; htmlStr += '<table class="sortable" border="1">'; htmlStr += ' <tr>'; htmlStr += ' <td><a onclick="ts_resortTable(this, 0);return false;" href="#">ID<SPAN class=sortarrow></SPAN></a></td>'; htmlStr += ' <td><a onclick="ts_resortTable(this, 1);return false;" href="#">Name<SPAN class=sortarrow></SPAN></a></td>'; htmlStr += ' </tr>'; htmlStr += ' <tr>'; htmlStr += ' <td>1</td>'; htmlStr += ' <td>Dicky</td>'; htmlStr += ' </tr>'; htmlStr += ' <tr>'; htmlStr += ' <td>3</td>'; htmlStr += ' <td>Tom</td>'; htmlStr += ' </tr>'; htmlStr += ' <tr>'; htmlStr += ' <td>2</td>'; htmlStr += ' <td>Angelia</td>'; htmlStr += ' </tr>'; htmlStr += ' <tr>'; htmlStr += ' <td>4</td>'; htmlStr += ' <td>Peter</td>'; htmlStr += ' </tr>'; htmlStr += '</table>'; function MakeTable() { $("divShow").innerHTML = htmlStr; } //--> </script> <input type="button" value="Make table" id="btnMake" onclick="MakeTable();" /> <div id="divShow"></div> </BODY></html>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
青苹果Web应用商店
https://webapp.taobao.com/
PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发,详细需求联系
QQ:8511978
查看全文
相关阅读:
rsync命令详解
Android Studio手动下载配置Gradle的方法
"standard,singleTop,singleTask,singleInstance"-Android启动模式
"Activity" 总结
Android应用开发完全退出程序的通用方法
SVN服务器使用(一)
使用PyInstaller打包Python程序
py2exe把python程序转换exe
python 下载安装setuptools及pip应用
Python的库和资源(转)
原文地址:https://www.cnblogs.com/Dicky/p/670836.html
最新文章
python库学习笔记——爬虫常用的BeautifulSoup的介绍
Java 并发 —— 读写锁(ReadWriteLock)
pandas 学习 —— 逻辑表达式与布尔索引
【繁琐工作自动化】pandas 处理 excel 文件
Java 内存管理、JVM 工作原理与 Java 运行时系统
Serializable 接口与 Java 序列化与反序列化
DSC配置
Windows Server 2008找回密码
找回丢失的SQL Server性能计数器
查看组所属管理包
热门文章
计算文字行数
更改OS序列号(slmgr)
补丁安装命令(WUSA)
组策略链接顺序优先级
导出DC列表
rsync(三)算法原理和工作流程分析
rsync(二):inotify+rsync详细说明和sersync
rsync(一):基本命令和用法
git大文件管理
rsync常用命令及格式
Copyright © 2011-2022 走看看