js实现点击分类名称实现排序效果

作者:sky 点击:445 评论:0 发布时间:周一, 04/21/2014 - 20:55 所属分类:表单按钮

通过js脚本实现点击分类名称来排序显示特效，很方便的一个网页特效，许多站长都用到这个点击标题排序显示特效。

<!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 content="text/html; charset=gb2312" http-equiv="Content-Type"> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,全力打造一流网页特效站" /> <title>站长特效 js实现点击分类排序效果站长特效网</title> <style type="text/css"> * { padding:0; margin:0; } body { font-family:verdana; font-size:12px; } .wwwzzjsnet { width:550px; margin:20px auto; } .wwwzzjsnet h1 { font-family:'微软雅黑'; font-size:18px; padding-bottom:5px; } table { width:100%; } th, td { padding:6px 0; text-align:center; } th { background-color:#007D28; color:#ffffff; } tr { background-color:#E8FFE8; } .odd { background-color:#FFF3EE; } .high_wwwzzjsnet { background-color:#FFF3EE; } </style> <script type="text/javascript"> //动态给js添加class属性 function add_wwwzzjs_net(element, value) { if(!element.className) { element.className = value; //如果element本身不存在class,则直接添加class为value的值 } else { element.className += " "+value; //如果element之前有一个class值，注意中间要多一个空格,然后再加上value的值 } } //欢迎来到站长特效q网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 //鼠标经过时高亮显示 function highrows_zzjs_net() { var rows = document.getElementsByTagName("tr"); for(var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className; //首先保存之前的class值 rows[i].onmouseover = function() { add_wwwzzjs_net(this, "high_wwwzzjsnet"); //鼠标经过时添加class为high_wwwzzjsnet的值 } rows[i].onmouseout = function() { this.className = this.oldClassName; //鼠标离开时还原之前的class值 } } }//欢迎来到站长特效c网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 //比较之前进行数据转换 function cov_wwwzzjsnet(value, dataType) { switch(dataType) { case "int": return parseInt(value); break case "float": return parseFloat(value); break case "date": return Date.parse(value); break default: return value.toString(); } }//欢迎来到站长特c效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 //用于sort比较字符串 function cols_www_zzjs_net(col, dataType) { return function compareTrs(tr1, tr2) { value1 = cov_wwwzzjsnet(tr1.cells[col].innerHTML, dataType); value2 = cov_wwwzzjsnet(tr2.cells[col].innerHTML, dataType); if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } }; }//欢迎来到站长c特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 //对表格进行排序 function tablewwwzzjsnet(tableId, col, dataType) { var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr = tbody.rows; var trValue = new Array(); for (var i=0; i<tr.length; i++ ) { trValue[i] = tr[i]; //将表格中各行的信息存储在新建的数组中 } if (tbody.sortCol == col) { trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列 } else { trValue.sort(cols_www_zzjs_net(col, dataType)); //进行排序 } var fragment = document.createDocumentFragment(); //新建一个代码片段，用于保存排序后的结果 for (var i=0; i<trValue.length; i++ ) { fragment.appendChild(trValue[i]); } tbody.appendChild(fragment); //将排序的结果替换掉之前的值 tbody.sortCol = col; }//欢迎来到站x长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 window.onload = function() { highrows_zzjs_net(); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div class="wwwzzjsnet"> <h1>会员信息表(点击表格标题可进行排序)</h1> <table id="table_zzjs_net"> <thead> <tr> <th onclick="tablewwwzzjsnet('table_zzjs_net', 0, 'int')" style="cursor: pointer;">会员ID</th> <th onclick="tablewwwzzjsnet('table_zzjs_net', 1)" style="cursor: pointer;">会员名</th> <th onclick="tablewwwzzjsnet('table_zzjs_net', 2)" style="cursor: pointer;">邮箱</th> <th onclick="tablewwwzzjsnet('table_zzjs_net', 3)" style="cursor: pointer;">会员组</th> <th onclick="tablewwwzzjsnet('table_zzjs_net', 4)" style="cursor: pointer;">城市</th> <th onclick="tablewwwzzjsnet('table_zzjs_net', 5, 'date')" style="cursor: pointer;">注册时间</th> </tr> </thead> <tbody> <tr> <td>126</td> <td>站长特效一号</td> <td>ceo1@zzjs.net</td> <td>普通会员</td> <td>北京</td> <td>2011-04-13</td> </tr> <tr> <td>145</td> <td>站长特效二号</td> <td>ceo2@zzjs.net</td> <td>中级会员</td> <td>合肥</td> <td>2011-03-27</td> </tr> <tr> <td>116</td> <td>站长特效三号</td> <td>ceo3@zzjs.net</td> <td>普通会员</td> <td>南昌</td> <td>2011-04-01</td> </tr> <tr> <td>129</td> <td>站长特效四号</td> <td>ceo4@zzjs.net</td> <td>中级会员</td> <td>北京</td> <td>2011-04-06</td> </tr> <tr> <td>155</td> <td>站长特效五号</td> <td>ceo5@zzjs.net</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-06</td> </tr> <tr> <td>131</td> <td>站长特效六号</td> <td>ceo6@zzjs.net</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-08</td> </tr> <tr> <td>132</td> <td>站长特效七号</td> <td>ceo7@zzjs.net</td> <td>高级会员</td> <td>北京</td> <td>2011-04-12</td> </tr> </tbody> </table> </div> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(2)

100%

踩一下

(0)

标签: