当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 定单管理上 JS表格排序

技术文章搜索

关键字

Javascript 中的 定单管理上 JS表格排序

---

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 404 ::
收藏到网摘: n/a

document.open() 与 document.write() js传值 判断

自己经常用的比较好用的效果 经常用在定单管理上 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 全选 提示:你可先修改部分代码,再按运行]

客户需要一个这样的效果 单击一个图片 显示隐藏的5个导航图片
就是差图片渐隐渐显的效果 感觉太生硬 大家帮忙看看改改 谢谢 代码如下

点击运行可以看到效果:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>顺序显示</title> <style type="text/css"> #container{ position:absolute; padding:10px; } #container li{ display:none; list-style:none; float:left; margin:5px; padding:2px; width:80px; height:80px; border:3px #ccc double; font:30px Verdana, Arial, Helvetica, sans-serif; color:#666; background-color: #eee; FILTER: alpha(opacity=50); } #container .orderly-change{ border:3px #666 double; FILTER: alpha(opacity=100); } </style> </head> <body> <img src="http://image2.sina.com.cn/dy/temp/119/2006-02-05/U1043P1T119D48F2656DT20061025113622.jpg" border="0" /> <-------点一下这张图片 <ul id="container" > <li id="li1"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1244DT20061019181804.jpg" /></li> <li id="li2"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1215DT20061019181804.jpg" /></li> <li id="li3"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1250DT20061019180903.jpg" /></li> <li id="li4"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1244DT20061019181804.jpg" /></li> <li id="li5"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1249DT20061019180903.jpg" /></li> <li id="li6"><img src="http://image2.sina.com.cn/dy/z/chinaafrica/U43P1T63D2742F1249DT20061019181804.jpg" /></li> </ul> <script type="text/javascript"> var i=0,j function orderly_show(){ var container_li=document.getElementById("container").getElementsByTagName("li"); if(i<container_li.length){ container_li[i].style.display="block"; if(j<container_li.length){ container_li[j].className="orderly-change"; } i++; j=i-1; } else if(i=container_li.length){ container_li[j].className="orderly-change"; } setTimeout("orderly_show()",900); } //orderly_show(); </script> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> </head> <div id="imgopacity" style="position:absolute;top:100px;"><img src="http://gg.blueidea.com/2006/feloo/380_40.jpg" id="imga"/></div> <input name="btn" type="button" value="请点击我" onClick="opa();"> <script language="javascript" type="text/javascript"> var opa_value=0; var k=0; function opa(){ if(k==1){opa_value=0;k=0} opa_value++; if(opa_value>=100) {opa_value=100;k=1;return;} var opastyle="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+opa_value+")"; document.getElementById("imga").style.filter=opastyle; setTimeout("opa();",10); } </script> <body> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

document.open() 与 document.write() js传值 判断

评论 (0) All

登陆 还没注册？

设为首页 | 加入收藏 | 关于我们 | 联系我们 | 广告服务 | 网站地图 | 友情链接 | 在线帮助 | 免责声明 Sitemap W3school

如果您觉得本站不错，别忘了告诉您的同学和同事哟 ^_^

欢迎各网站转载我们的原创，转载时请注明出处。

All copyright is reserved by 软晨网（RuanChen.com）