定单管理上 JS表格排序第1/2页

更新时间：2006年10月26日 00:00:00 作者：

自己经常用的比较好用的效果经常用在定单管理上 JS表格排序不需要用ASP再计算一次

<script language="JavaScript" type="text/javascript"> 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); } </script> <table width="100%" border="1" cellspacing="0" cellpadding="1" onclick="sortColumn(event)">  <thead> <tr>     <td><a href='#'>序号</a></th>     <td><a href="#">名称</a></th>     <td><a href="#">金额</a></th>     <td><a href="#">数量</a></th>     <td><a href="#">日期</a> </th>     <td><a href="#">点击</a></th>   </tr></thead>   <tr>     <td>1</td>     <td>a</td>     <td>1.26</td>     <td>5</td>     <td>2006-1-5</td>     <td>321</td>   </tr>   <tr>     <td>2</td>     <td>e</td>     <td>12.65</td>     <td>6</td>     <td>2006-10-4</td>     <td>456</td>   </tr>   <tr>     <td>3</td>     <td>f</td>     <td>21.03</td>     <td>4</td>     <td>2006-2-7</td>     <td>122</td>   </tr>   <tr>     <td>4</td>     <td>g</td>     <td>21.33</td>     <td>3</td>     <td>2006-8-9</td>     <td>147</td>   </tr>   <tr>     <td>5</td>     <td>h</td>     <td>12.21</td>     <td>5</td>     <td>2007-8-1</td>     <td>1024</td>   </tr>   <tr>     <td>6</td>     <td>d</td>     <td>14.36</td>     <td>2</td>     <td>2003-4-9</td>     <td>99</td>   </tr>   <tr>     <td>7</td>     <td>a</td>     <td>25.3</td>     <td>3</td>     <td>2006-10-4</td>     <td>122</td>   </tr>   <tr>     <td>8</td>     <td>wd</td>     <td>0.35</td>     <td>44</td>     <td>2008-10-25</td>     <td>444</td>   </tr>   <tr>     <td>9</td>     <td>f</td>     <td>12.1</td>     <td>56</td>     <td>2006-10-23</td>     <td>123</td>   </tr>   <tr>     <td>10</td>     <td>w</td>     <td>123.3</td>     <td>12</td>     <td>2005-5-7</td>     <td>321</td>   </tr>   <tr>     <td>11</td>     <td>e</td>     <td>654</td>     <td>12</td>     <td>2006-9-12</td>     <td>99</td>   </tr>   <tr>     <td>12</td>     <td>t</td>     <td>12.21</td>     <td>13</td>     <td>2007-7-3</td>     <td>100</td>   </tr>   <tr>     <td>13</td>     <td>f</td>     <td>12.64</td>     <td>14</td>     <td>2001-12-31</td>     <td>32</td>   </tr> </table>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

12 下一页阅读全文

您可能感兴趣的文章:

相关文章

借助JavaScript脚本判断浏览器Flash Player信息的方法
做了一个小的Demo，在测试时发现经常报错，对此总结了一下借助JavaScript脚本判断浏览器Flash Player信息的方法,需要的朋友可以参考下
2014-07-07
使用重写url机制实现验证码换一张功能
重写URL机制：为了保证一个url的地址唯一，可每次向服务器传递的参数不一样即可。此处在实现验证码的换一张的功能时，就是利用了改变参数列表的值进行刷新。具体详细代码大家参考下本文
2017-08-08
详解JavaScript实现JS弹窗的三种方式
这篇文章主要为大家介绍了JavaScript实现JS弹窗的三种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>
2022-01-01
javascript中setTimeout使用指南
本文给大家通过3个方法向大家展示了javascript中的setTimeout的使用，非常的简单，有需要的小伙伴可以参考下。
2015-07-07
不使用jquery实现js打字效果示例分享
js打字效果示例js打字效果示例,data-period设置从打字返回删字的时间，data-rotate可加减中英文词语，不用jquery支持
2014-01-01
JS 自定义带默认值的函数
今天与同事一起看了一个javscript定义函数问题，如何在定义一个函数里给参数一个默认值.
2011-07-07
基于Three.js插件制作360度全景图
这篇文章主要介绍了基于Three.js插件制作的360度全景图,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
js实现简洁的TAB滑动门效果代码
这篇文章主要介绍了js实现简洁的TAB滑动门效果代码,通过简单的JavaScript自定义函数动态遍历页面元素实现tab滑动切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
JS+HTML5 FileReader实现文件上传前本地预览功能
这篇文章主要为大家详细介绍了JS+HTML5 FileReader实现文件上传前本地预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JavaScript中style.left与offsetLeft的使用及区别详解
这篇文章主要介绍了JavaScript中style.left与offsetLeft的使用及区别详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06

最新评论