欢迎来到代码驿站！

JavaScript代码

当前位置：首页 > 网页前端 > JavaScript代码

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

时间：2021-08-12 09:30:15|栏目：JavaScript代码|点击：次

自己经常用的比较好用的效果经常用在定单管理上 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中setInterval和setTimeout的使用问题

栏目：JavaScript代码

下一篇：jfreechart插件将数据展示成饼状图、柱状图和折线图

本文标题：定单管理上 JS表格排序第1/2页

本文地址：http://www.codeinn.net/misctech/166129.html

更多JavaScript代码

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：914707363 | 邮箱：codeinn#126.com(#换成@)

Copyright © 2020 代码驿站版权所有