首页 > 编程 > JavaScript > 正文

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

2019-11-21 02:29:08

字体：大中小

来源：转载

供稿：网友

自己经常用的比较好用的效果经常用在定单管理上 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 下一页阅读全文

上一篇：js传值判断

下一篇：document.open() 与 document.write()

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注