求助:写了一个表格排序的js 只能运行一次 第二次就出错了 本帖最后由 tyskin 于 2011-12-14 15:43:57 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 $(".order").each(function(i){ arr[i] = rows[i];感觉楼主这段代码有点问题,如果出现像楼主说的那样就出现一次的话,就应该是这里只有一项被加入到arr数组中去了PS:没有完整的代码,就猜测下吧,希望对楼主有用 jquery有表格排序的插件, 楼主就省省吧 <!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>Table排序</title> </head> <body> <style type="text/css"> .fu_list{ width:500px; border:1px solid #ebebeb;line-height:20px; font-size:12px;} .fu_list thead td{background-color:#ebebeb;} .fu_list td{padding:5px;} .fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/} .fu_list a:link, .fu_list a:visited, .fu_list a:hover, .fu_list a:active{text-decoration:none;color:#333;} .fu_list thead a{padding-right:15px;} .fu_list thead a.up, .fu_list thead a.down{ background:url(http://www.fs12345.com/upphoto/cloud/5a539829-d9b9-4437-bc9c-20b32f1fc4b7.gif) right center no-repeat; } .fu_list thead a.down{background-image:url(http://www.fs12345.com/upphoto/cloud/76a4b69b-38b8-4abd-8a58-82d2ade8d526.gif);} </style> <table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable"> <thead> <tr> <td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td> <td width="150" align="center"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td> <td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td> </tr> </thead> <tbody> <tr> <td _ext="rar">new.rar</td> <td align="center" _order="2008/9/12 8:51:09">2008-9-12 8:51:09</td> <td align="right" _order="433247">423.09 K</td> </tr> <tr> <td _ext="js">Scroller.js</td> <td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> <td align="right" _order="2556">2.5 K</td> </tr> <tr> <td _ext="js">AlertBox.js</td> <td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td> <td align="right" _order="3565">3.48 K</td> </tr> <tr> <td _ext="htm">1.htm</td> <td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td> <td align="right" _order="11394">11.13 K</td> </tr> <tr> <td _ext="htm">4.htm</td> <td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td> <td align="right" _order="351">351 b</td> </tr> <tr> <td _ext="xml">news.xml</td> <td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> <td align="right" _order="14074">13.74 K</td> </tr> <tr> <td _ext="js">function.js</td> <td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td> <td align="right" _order="2844">2.78 K</td> </tr> <tr> <td _ext="mp3">紫色头发</td> <td align="center" _order="2008/10/7 0:07:43">2008-10-7 0:07:43</td> <td align="right" _order="3111293">2.97 M</td> </tr> <tr> <td _ext="doc">详细功略+剧情流程(一).doc</td> <td align="center" _order="2008/10/7 0:07:43">2008-10-7 0:07:43</td> <td align="right" _order="63488">62 K</td> </tr> <tr> <td _ext="doc">黑色头发.doc</td> <td align="center" _order="2008/10/7 0:07:54">2008-10-7 0:07:54</td> <td align="right" _order="164352">160.5 K</td> </tr> <tr> <td _ext="txt">禁止文件预览功能.txt</td> <td align="center" _order="2008/10/7 0:07:58">2008-10-7 0:07:58</td> <td align="right" _order="860">860 b</td> </tr> </tbody> </table> <input name="" type="button" value="有x的排前面" id="idBtn" /> <script type="text/javascript"> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } Function.prototype.bind = function(object) { var __method = this, args = Array.prototype.slice.call(arguments); args.shift(); return function() { return __method.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; var TableOrder = Class.create(); TableOrder.prototype = { initialize: function(table) { this.tBody = $(table).tBodies[0];//tbody对象 this.Rows = [];//行集合 this._order = null;//排序对象 Each(this.tBody.rows, function(o){ this.Rows.push(o); }.bind(this)); }, //排序并显示 Sort: function() { //没有排序对象返回 if(!this._order){ return false }; //排序 this.Rows.sort(this._order.Compare || this.Compare.bind(this)); this._order.Down && this.Rows.reverse();//取反 //显示表格 var oFragment = document.createDocumentFragment(); Each(this.Rows, function(o){ oFragment.appendChild(o); }); this.tBody.appendChild(oFragment); //执行附加函数 this._order.onSort(); }, //比较函数 Compare: function(o1, o2) { var value1 = this.GetValue(o1), value2 = this.GetValue(o2); return value1 < value2 ? -1 : value1 > value2 ? 1 : 0; }, //获取比较值 GetValue: function(tr) { var td = tr.getElementsByTagName("td")[this._order.Index], data = td[this._order.Attri] || td.getAttribute(this._order.Attri); //数据转换 switch (this._order.DataType.toLowerCase()) { case "int": return parseInt(data) || 0; case "float": return parseFloat(data) || 0; case "date": return Date.parse(data) || 0; case "string": default: return data.toString() || ""; } }, //添加并返回一个排序对象 Add: function(index, options) { var oThis = this; return new function(){ //默认属性 this.Attri = "innerHTML";//获取数据的属性 this.DataType = "string";//比较的数据类型 this.Down = true;//是否按顺序 this.onSort = function(){};//排序时执行 this.Compare = null;//自定义排序函数 Object.extend(this, options || {}); //td索引 this.Index = index; this.Sort = function(){ oThis._order = this; oThis.Sort(); }; }; } } var to = new TableOrder("idTable"); function SetOrder(obj, index, options){ var o = $(obj); //_arr是记录排序项目(这里主要用来设置样式) !SetOrder._arr && (SetOrder._arr = []); SetOrder._arr.push(o); //添加一个排序对象 var order = to.Add(index, options); order.onSort = function(){ //设置样式 Each(SetOrder._arr, function(o){ o.className = ""; }); o.className = order.Down ? "down" : "up"; //取相反排序 order.Down = !order.Down } o.onclick = function(){ order.Sort(); return false; } } SetOrder("idTitle", 0); SetOrder("idExt", 0, { Attri: "_ext" }); SetOrder("idAddtime", 1, { Attri: "_order", DataType: "date" }); SetOrder("idSize", 2, { Attri: "_order", DataType: "int" }); var order2 = to.Add(0, { onSort: function(){ Each(SetOrder._arr, function(o){ o.className = ""; }); }, Compare: function(o1, o2) { var value1 = /x/i.test(to.GetValue(o1)), value2 = /x/i.test(to.GetValue(o2)); return value1 && !value2 ? 1 : !value1 && value2 ? -1 : 0; } }); $("idBtn").onclick = function(){ order2.Sort(); } </script> </body> </html> 简写下面的js代码 初学JS 问个基础问题 html,js,asp.net调用bat jquery的一个小问题 ext 页面底部出现空白 为什么我这层怎么接触不上呢?有人可以给改改吗?onmouseover 和 onmouseout 的问题! 如果有两层frame,怎样交互啊?? 重复值当一个的算法问题[急]. 用javascript求取时间差 求百度或高德地图开发工具, 同步显示问题 着急!在线等! 请教EXTJS级联问题
arr[i] = rows[i];感觉楼主这段代码有点问题,如果出现像楼主说的那样就出现一次的话,就应该是这里只有一项被加入到arr数组中去了PS:没有完整的代码,就猜测下吧,希望对楼主有用
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Table排序</title>
</head>
<body>
<style type="text/css">
.fu_list{ width:500px; border:1px solid #ebebeb;line-height:20px; font-size:12px;}
.fu_list thead td{background-color:#ebebeb;}
.fu_list td{padding:5px;}
.fu_list a{outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/}
.fu_list a:link, .fu_list a:visited, .fu_list a:hover, .fu_list a:active{text-decoration:none;color:#333;}
.fu_list thead a{padding-right:15px;}
.fu_list thead a.up, .fu_list thead a.down{ background:url(http://www.fs12345.com/upphoto/cloud/5a539829-d9b9-4437-bc9c-20b32f1fc4b7.gif) right center no-repeat; }
.fu_list thead a.down{background-image:url(http://www.fs12345.com/upphoto/cloud/76a4b69b-38b8-4abd-8a58-82d2ade8d526.gif);}
</style>
<table border="0" cellspacing="0" cellpadding="0" class="fu_list" id="idTable">
<thead>
<tr>
<td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
<td width="150" align="center"><a href="javascript:void(0)" id="idAddtime" class="up">上传时间</a></td>
<td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td>
</tr>
</thead>
<tbody>
<tr>
<td _ext="rar">new.rar</td>
<td align="center" _order="2008/9/12 8:51:09">2008-9-12 8:51:09</td>
<td align="right" _order="433247">423.09 K</td>
</tr>
<tr>
<td _ext="js">Scroller.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="2556">2.5 K</td>
</tr>
<tr>
<td _ext="js">AlertBox.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="3565">3.48 K</td>
</tr>
<tr>
<td _ext="htm">1.htm</td>
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td>
<td align="right" _order="11394">11.13 K</td>
</tr>
<tr>
<td _ext="htm">4.htm</td>
<td align="center" _order="2008/10/4 20:21:54">2008-10-4 20:21:54</td>
<td align="right" _order="351">351 b</td>
</tr>
<tr>
<td _ext="xml">news.xml</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="14074">13.74 K</td>
</tr>
<tr>
<td _ext="js">function.js</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="2844">2.78 K</td>
</tr>
<tr>
<td _ext="mp3">紫色头发</td>
<td align="center" _order="2008/10/7 0:07:43">2008-10-7 0:07:43</td>
<td align="right" _order="3111293">2.97 M</td>
</tr>
<tr>
<td _ext="doc">详细功略+剧情流程(一).doc</td>
<td align="center" _order="2008/10/7 0:07:43">2008-10-7 0:07:43</td>
<td align="right" _order="63488">62 K</td>
</tr>
<tr>
<td _ext="doc">黑色头发.doc</td>
<td align="center" _order="2008/10/7 0:07:54">2008-10-7 0:07:54</td>
<td align="right" _order="164352">160.5 K</td>
</tr>
<tr>
<td _ext="txt">禁止文件预览功能.txt</td>
<td align="center" _order="2008/10/7 0:07:58">2008-10-7 0:07:58</td>
<td align="right" _order="860">860 b</td>
</tr>
</tbody>
</table>
<input name="" type="button" value="有x的排前面" id="idBtn" />
<script type="text/javascript">
var $ = function (id)
{
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
Function.prototype.bind = function(object) {
var __method = this, args = Array.prototype.slice.call(arguments); args.shift();
return function() {
return __method.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
var TableOrder = Class.create();
TableOrder.prototype = {
initialize: function(table) {
this.tBody = $(table).tBodies[0];//tbody对象
this.Rows = [];//行集合
this._order = null;//排序对象
Each(this.tBody.rows, function(o){ this.Rows.push(o); }.bind(this));
},
//排序并显示
Sort: function() {
//没有排序对象返回
if(!this._order){ return false };
//排序
this.Rows.sort(this._order.Compare || this.Compare.bind(this));
this._order.Down && this.Rows.reverse();//取反
//显示表格
var oFragment = document.createDocumentFragment();
Each(this.Rows, function(o){ oFragment.appendChild(o); });
this.tBody.appendChild(oFragment);
//执行附加函数
this._order.onSort();
},
//比较函数
Compare: function(o1, o2) {
var value1 = this.GetValue(o1), value2 = this.GetValue(o2);
return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
},
//获取比较值
GetValue: function(tr) {
var td = tr.getElementsByTagName("td")[this._order.Index], data = td[this._order.Attri] || td.getAttribute(this._order.Attri);
//数据转换
switch (this._order.DataType.toLowerCase()) {
case "int":
return parseInt(data) || 0;
case "float":
return parseFloat(data) || 0;
case "date":
return Date.parse(data) || 0;
case "string":
default:
return data.toString() || "";
}
},
//添加并返回一个排序对象
Add: function(index, options) {
var oThis = this;
return new function(){
//默认属性
this.Attri = "innerHTML";//获取数据的属性
this.DataType = "string";//比较的数据类型
this.Down = true;//是否按顺序
this.onSort = function(){};//排序时执行
this.Compare = null;//自定义排序函数
Object.extend(this, options || {});
//td索引
this.Index = index;
this.Sort = function(){ oThis._order = this; oThis.Sort(); };
};
}
}
var to = new TableOrder("idTable");
function SetOrder(obj, index, options){
var o = $(obj);
//_arr是记录排序项目(这里主要用来设置样式)
!SetOrder._arr && (SetOrder._arr = []); SetOrder._arr.push(o);
//添加一个排序对象
var order = to.Add(index, options);
order.onSort = function(){
//设置样式
Each(SetOrder._arr, function(o){ o.className = ""; });
o.className = order.Down ? "down" : "up";
//取相反排序
order.Down = !order.Down
}
o.onclick = function(){ order.Sort(); return false; }
}
SetOrder("idTitle", 0);
SetOrder("idExt", 0, { Attri: "_ext" });
SetOrder("idAddtime", 1, { Attri: "_order", DataType: "date" });
SetOrder("idSize", 2, { Attri: "_order", DataType: "int" });
var order2 = to.Add(0, {
onSort: function(){ Each(SetOrder._arr, function(o){ o.className = ""; }); },
Compare: function(o1, o2) {
var value1 = /x/i.test(to.GetValue(o1)), value2 = /x/i.test(to.GetValue(o2));
return value1 && !value2 ? 1 : !value1 && value2 ? -1 : 0;
}
});
$("idBtn").onclick = function(){ order2.Sort(); }
</script>
</body>
</html>