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
查看全文
相关阅读:
linux下mysql安装
出现GC overhead limit exceeded 的解决方案
什么是OOM?如何解决OOM问题!
老司机告诉你:别再被忽悠,汽车节气门这样洗最养车
HDU 4352 XHXJ's LIS(数位dp&状态压缩)
Linux bash: scp: command not found的问题记录
Codeforces Round #315 (Div. 2)
【营销】非常重要
firebug的应用
powerdesigner中实现PDM到MYSQl数据库的转换
原文地址:https://www.cnblogs.com/Dicky/p/670836.html
最新文章
【BZOJ2729】【HNOI2012】排队(组合数学)
【BZOJ4003】【JLOI2015】城池攻占(左偏树)
【NOIP2013】华容道(最短路)
【NOIP2014】解方程(枚举)
【BZOJ3223】文艺平衡树(Splay)
【BZOJ2809】【APIO2012】Dispatching(左偏树)
NOIP2011题解
【NOIP2012】疫情控制(二分,倍增,贪心)
【NOIP2012】开车旅行(倍增)
【NOIP2015】运输计划(二分,差分)
热门文章
Splay入门解析【保证让你看不懂(滑稽)】
NOIP2010题解
【HNOI2012】永无乡(splay,启发式合并)
【HAOI2015】树上操作(树链剖分)
添加nginx服务到service的过程
Centos7 nginx安装
重置密码解决MySQL for Linux错误 ERROR 1045 (28000)
CentOS7安装MySQL冲突和问题解决小结
查看虚拟机里的Centos7的IP
Linux RPM 命令参数使用详解
Copyright © 2011-2022 走看看