[js].net中表格数据的排序的js应用，非常简单（中国铁路查询）

js如下 ,务必确保js的编码格式和你的html文本的格式一致，同为gb2312或其他
var dom = (document.getElementsByTagName) ? true : false; var ie5 = (document.getElementsByTagName && document.all) ? true : false; var arrowUp, arrowDown; if (ie5 || dom) initSortTable(); function initSortTable() { //↓↑ arrowUp = document.createElement("SPAN"); var tn = document.createTextNode("↓"); arrowUp.appendChild(tn); arrowUp.className = "arrow"; arrowDown = document.createElement("SPAN"); var tn = document.createTextNode("↑"); arrowDown.appendChild(tn); arrowDown.className = "arrow"; } function sortTable(tableNode, nCol, bDesc, sType) { var tBody = tableNode.tBodies[0]; var trs = tBody.rows; var a = new Array(); for (var i=0; i<trs.length; i++) { a[i] = trs[i]; } a.sort(compareByColumn(nCol,bDesc,sType)); for (var i=0; i<a.length; i++) { tBody.appendChild(a[i]); } } function CaseInsensitiveString(s) { return String(s).toUpperCase(); } function parseDate(s) { return Date.parse(s.replace(/\-/g, '/')); } function toNumber(s) { return Number(s.replace(/[^0-9\.]/g, "")); } function compareByColumn(nCol, bDescending, sType) { var c = nCol; var d = bDescending; var fTypeCast = String; if (sType == "Number") fTypeCast = Number; else if (sType == "Date") fTypeCast = parseDate; else if (sType == "CaseInsensitiveString") fTypeCast = CaseInsensitiveString; return function (n1, n2) { if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c]))) return d ? -1 : +1; if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c]))) return d ? +1 : -1; return 0; }; } function sortColumn(e) { var tmp, el, tHeadParent; if (ie5) tmp = e.srcElement; else if (dom) tmp = e.target; tHeadParent = getParent(tmp, "THEAD"); el = getParent(tmp, "TD"); if (tHeadParent == null) return; if (el != null) { var p = el.parentNode; var i; if (el._descending) // catch the null el._descending = false; else el._descending = true; if (tHeadParent.arrow != null) { if (tHeadParent.arrow.parentNode != el) { tHeadParent.arrow.parentNode._descending = null; } tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow); } if (el._descending) tHeadParent.arrow = arrowDown.cloneNode(true); else tHeadParent.arrow = arrowUp.cloneNode(true); el.appendChild(tHeadParent.arrow); // get the index of the td for (i=0; i<p.cells.length; i++) { if (p.cells[i] == el) break; } var table = getParent(el, "TABLE"); // can't fail sortTable(table,i,el._descending, el.getAttribute("type")); } } function getInnerText(el) { if (ie5) return el.innerText; //Not needed but it is faster var str = ""; for (var i=0; i<el.childNodes.length; i++) { switch (el.childNodes.item(i).nodeType) { case 1: //ELEMENT_NODE str += getInnerText(el.childNodes.item(i)); break; case 3: //TEXT_NODE str += el.childNodes.item(i).nodeValue; break; } } return str; } function getParent(el, pTagName) { if (el == null) return null; else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) return el; else return getParent(el.parentNode, pTagName); }
范例。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>中国铁路网网上订票列车时刻表火车时刻表列车时刻火车票车次查询售票网点</title> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="description" CONTENT="全国铁路列车时刻查询系统,列车时刻表，火车时刻表，火车票，列车时刻,站站查询,车次查询,网上订票，售票网点"> <link rel="stylesheet" type="text/css" href="css.css"> <script src="softfunction.js" language="javascript" type="text/javascript"></script> </HEAD> <body> <TABLE onclick="sortColumn(event)"> <THEAD> <tr> <td><a title='按车次名称排序' href='#'>车次</a></td> <td><a title='按始发车站名称排序' href='#'><u>始发站</u></a></td> <td><a title='按始发时间排序' href='#'><u>始发<br>时间</u></a></td> </tr> </THEAD> <tr> <td>T134</td> <td>大连 </td> <td>11:32</td> </tr> <tr> <td>T135</td> <td>大连 </td> <td>11:32</td> </tr> <tr> <td>T136</td> <td>大连 </td> <td>11:32</td> </tr> </table> </body> </HTML>

根据.net的script制作。
只需在表格中添加引用即可。
注意script必须为utf-8格式。
softfunction.js可以去中国铁路查询train.tielu.org下载。
< script src="<?php echo $comLivePath;?>/softfunction.js" language="javascript" type="text/javascript">< /script>
< table class="adminlist" onclick=sortColumn(event) border=1>
< thead>
  < tr>
   < td width="5">
   < a title='按序号排序' href='#'>
   #
   < /a>
   < /td>

注意thead务必加上。
并修改样式templates\mambo_admin_blue\css\template_css.css
table.adminlist thead td {
background: url(../images/background.gif);
background-repeat: repeat;
color: #ffffff;
height: 25px;
padding: 4px;
}

table.adminlist tbody td {
border-bottom: 1px solid #e5e5e5;
padding: 4px;
}

Posted on 2005-11-28 10:35 古代阅读(679) 评论(0) 编辑收藏举报

刷新页面返回顶部