- 浏览: 7064659 次
- 性别:
- 来自: 上海
最新评论
-
autosuggestion:
实现一个智能提示功能需要JavaScript、ajax、数据库 ...
自动提示结果 -
岁月之眸:
...
Java读TXT文件 -
yujian58:
写的好。
在线客服技术方案 -
QQ1067184821:
你好,能不能发个完整的给我呢?1067184821@qq.co ...
Extjs3.2+Json lib动态树与GridPanel简单展现 -
chenhua0725:
能不能发一个完成的包给我呢,谢谢了,83667664@qq.c ...
Extjs3.2+Json lib动态树与GridPanel简单展现
table排序类,点击第一行标题可以排序
<!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排序类,点击第一行标题可以排序
corange.cn</title>
</head>
<body>
<style type="text/css">
.fu_list{ width:400px; 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*/ text-decoration:none; color:#333;}
.fu_list thead a{padding-right:15px;}
.fu_list thead a.up, .fu_list thead a.down{ background:url(up.gif) right center no-repeat; }
.fu_list thead a.down{background-image:url(down.gif);}
</style>
<table border="0" cellspacing="0" cellpadding="0" class="fu_list">
<thead>
<tr>
<td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
<td width="200" 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 id="idList">
<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">TagControl.js</td>
<td align="center" _order="2008/9/23 11:26:57">2008-9-23 11:26:57</td>
<td align="right" _order="1387">1.35 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="xsl">news.xsl</td>
<td align="center" _order="2008/10/4 20:24:11">2008-10-4 20:24:11</td>
<td align="right" _order="16796">16.4 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>
</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 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(tbody) {
var oThis = this;
this.tBody = $(tbody);//tbody对象
this.Rows = [];//行集合
this._order = null;//排序对象
Each(this.tBody.rows, function(o){ oThis.Rows.push(o); })
},
//排序并显示
Sort: function() {
//排序
if(!this._order){ return false };//没有排序对象返回
this.Rows.sort(!this._order.Compare ? this.Compare() : this._order.Compare);//排序
this._order.Down && this.Rows.reverse();//取反
//显示表格
var oFragment = document.createDocumentFragment();
Each(this.Rows, function(o){ oFragment.appendChild(o); });
this.tBody.appendChild(oFragment);
},
//比较函数
Compare: function() {
var oThis = this;
return function(o1, o2) {
var value1 = oThis.GetValue(o1), value2 = oThis.GetValue(o2);
return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
};
},
//获取比较值
GetValue: function(tr) {
var data = tr.getElementsByTagName("td")[this._order.Index].getAttribute(this._order.Attribute);
//数据转换
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.Attribute = "innerHTML";//获取数据的属性
this.DataType = "string";//数据类型
this.Down = false;//是否按顺序
this.Compare = null;//自定义排序函数
Object.extend(this, options || {});
//排序对象的属性
this.Index = index;
this.Sort = function(){ oThis._order = this; oThis.Sort(); };
};
}
}
var to = new TableOrder("idList");
function SetOrder(obj, index, options){
var o = $(obj);
//添加一个排序对象
var order = to.Add(index, options);
o.onclick = function(){
//取相反排序
order.Down = !order.Down;
//设置样式
Each(SetOrder._arr, function(o){ o.className = ""; })
o.className = order.Down ? "down" : "up";
//排序显示
order.Sort();
return false;
}
//_arr是记录排序项目(这里主要用来设置样式)
SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = [];
}
SetOrder("idTitle", 0);
SetOrder("idExt", 0, { Attribute: "_ext" });
SetOrder("idAddtime", 1, { Attribute: "_order", DataType: "date" });
SetOrder("idSize", 2, { Attribute: "_order", DataType: "int" });
var order2 = to.Add(0, {
Compare: function(o1, o2) {
var value1 = /x/i.test(to.GetValue(o1)), value2 = /x/i.test(to.GetValue(o2));
if(value1 && !value2){
return 1;
} else if (!value1 && value2){
return -1;
} else {
return 0;
}
//return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
}
});
$("idBtn").onclick = function(){
order2.Sort();
}
</script>
</body>
</html>
发表评论
-
jQuery+Ajax+PHP+Mysql实现分页显示数据
2013-09-09 15:54 2867jQuery+Ajax+PHP+Mysql实现分页显示数 ... -
Tab页界面,用jQuery及Ajax技术实现
2009-09-19 18:06 1800从桌面开发的时代开始,Tab页就是一个优异的界面布局形式,兼有 ... -
自动提示结果
2008-12-05 14:39 1148自动提示结果,仿google搜索框提示 http://ww ... -
visibility和display区别
2008-12-05 19:55 909它们都可以实现对域的隐藏,但visibility要占用域的空间 ... -
可放在网页旁边的导航菜单,点击向右边展开
2008-12-05 20:04 1283<iframe name="google_ad ... -
图片加载loading...
2008-12-06 10:39 1186<iframe name="google_ad ... -
iframe加载loading...
2008-12-06 10:40 1182<body> <div id="l ... -
发一个选项卡动态增删的效果..
2008-12-06 13:16 1080发一个选项卡动态增删的效果.. 仿126的效果,可以删除的ta ... -
复选框问题,将选定的值在textarea显示
2008-12-07 02:12 1154<iframe name="google_ ... -
表格复选和复选变色效果
2008-12-07 02:13 738<style type="text/c ... -
表格数据排序
2008-12-07 02:14 994<STYLE type=text/css>TA ... -
检测密码强度
2008-12-07 02:15 919<!DOCTYPE html PUBLIC &quo ... -
CNL Tree Menu Ver1.02无限级树形菜by CNLei枫岩
2008-12-07 02:15 1189<!DOCTYPE html PUBLIC &quo ... -
点击按钮,实现复制网址的代码
2008-12-07 02:19 1910<iframe name="google_ ... -
完全去除页面滚动条的方法
2008-12-07 02:21 1712今天做站的时候客户要求实现网站全屏,使用JavaScript: ... -
支持IE和火狐浏览器的加入收藏夹js代码
2008-12-07 20:01 2956支持IE和火狐浏览器的加入收藏夹js代码 如果想要在opera ... -
javascript实现换皮肤的一种思路
2008-12-07 20:11 899难点在于document.write输出html语句结构用法。 ... -
yiu简易网页调色板功能调用代码
2008-12-08 10:13 986简易网页调色板功能调用代码 colorSelect('色值 ... -
表格隔行换色+鼠标经过变色(ie6,ie7,ff)
2008-12-08 10:21 1135<!DOCTYPE html PUBLIC " ... -
在不刷新的情况下动态添加表格行
2008-12-08 11:49 941<!DOCTYPE html PUBLIC " ...
相关推荐
标题中的“点击table首行列名按该列内容排序+冻结窗口”是指在处理表格数据时,用户能够通过点击表格的第一行(通常是表头)来实现数据的排序,并且可以固定(冻结)窗口的一部分,以便在滚动查看大量数据时始终保持...
`tablesorter`的核心功能在于它能够监听表格的表头(thead)点击事件,通过内置的算法对表格行(tr)进行动态排序。它支持多种类型的排序,包括数字、日期、字母顺序等,并且可以自定义排序规则。以下是对`...
"Jtable表格分三组排序(支持中文)"这个标题暗示我们需要实现一个功能,即允许用户按照多列进行排序,首先根据第一列(A列),然后是第二列(B列),最后是第三列(C列)。当第一列的值相同时,根据第二列进行排序...
表格固定左序列、顶部序列、第一行、列标题、统计行; 自动统计,排序(自定义统计规则); 表格图文、序列号、列标题格式化; 表格各组成背景、文字、网格、padding等配置; 表格批注; 表格内容、列标题点击事件;...
- **多列排序**:高级的表格排序允许用户按多个列进行排序,先按第一列排序,再按第二列,以此类推。 - **自定义排序**:某些情况下,用户可能需要根据特定逻辑进行排序,比如日期、货币或者其他复杂的数据类型。 ...
实现这个功能,可以使用第三方库如DataTables,或者自己编写排序逻辑。基本思路是监听表头点击事件,获取当前列索引,然后根据数据类型(数字、字符串等)对表格数据进行升序或降序排序。如果数据存储在数组中,可以...
默认情况下,第一次点击列标题会按升序排列,再次点击则变为降序。 ### 使用步骤 1. **引入 jQuery**:首先确保在你的HTML文档中包含了 jQuery 库。可以通过 CDN(内容分发网络)链接或者本地文件引入。 2. **...
表格固定左序列、顶部序列、第一行、列标题、统计行; 自动统计,排序(自定义统计规则); 表格图文、序列号、列标题格式化; 表格各组成背景、文字、网格、padding等配置; 表格批注; 表格内容、列标题点击事件;...
在IT领域,尤其是在前端开发中,LayUI是一个广受欢迎的轻量级前端框架,它提供了丰富的组件,如表格(Table...对于压缩包文件"tableMerge",它可能包含了一个示例代码或者相关的配置文件,可以作为实践这一功能的参考。
5. **比较函数**:在实现表格排序时,我们需要编写一个比较函数,它接受两个参数并返回一个负值、零或正值,表示第一个参数是否应排在第二个之前。例如,对于数字排序,我们可以使用`a - b`,对于日期排序,则可能...
第一行`<tr>`使用`<th>`元素,表示表头;第二行和第三行`<tr>`使用`<td>`元素,表示数据行。 为了使表格更具可读性,可以使用`<caption>`标签添加表格标题,`<colgroup>`和`<col>`用于设置整列的样式,例如宽度。...
1. 从第一个元素开始,该元素可以认为已经被排序。 2. 取出下一个元素,在已经排序的元素序列中从后向前扫描。 3. 如果被扫描的元素(已排序)大于新元素,将该元素移到下一位置。 4. 重复步骤3,直到找到已排序的...
实现拖动功能可能需要用到第三方库,如 `sortablejs`,它是一个轻量级的库,专门用于实现元素的拖放排序。将 `sortablejs` 引入项目后,可以监听其提供的 `start`, `move`, 和 `end` 事件,结合 Vue 的数据绑定机制...
例如,要删除第一行: ```javascript var rowId = $("#yourTable").jstable("getFirstRow").id; $("#yourTable").jstable("deleteRow", rowId); ``` 2. **基于行数据删除**:也可以根据行的某个特定值(比如ID)来...
标题中的“实现超用户体验 table排序javascript实现代码”指的是在网页中使用JavaScript来创建一个具有超用户体验的表格排序功能。这种功能通常用于数据展示,让用户能够更方便地管理和查看信息。描述中提到的效果是...
4. 规范化设计:通过遵循数据库规范化原则,如第一范式(1NF)、第二范式(2NF)和第三范式(3NF),可以减少数据冗余,提高数据一致性,但也可能影响查询性能,需要根据实际情况权衡。 5. 缓存策略:使用缓存技术...
- 或者,选中数据后,点击右下角的“快速分析”按钮,选择“表”选项卡,再点击第一个按钮“表”。 在创建 table 表时,确保勾选“表包含标题”选项,这样 Excel 将自动识别列标题,这对于后续的数据操作非常有用...
Table View的索引通常是一个右侧滑动的字母条,用户可以通过点击字母直接跳转到对应首字母的行。要实现这个功能,我们需要维护两个数据结构:一个是完整的排序后的数据列表,另一个是索引数组,包含了所有可能出现的...
Bootstrap Table 是一个流行的前端组件库,它允许开发者创建美观、响应式的表格。在某些场景下,比如报表分析或数据展示,我们可能需要合并表格中的单元格以提高信息的可读性和展示效果。本文将详细讨论如何使用 ...
线性表是由n(n>=0)个相同类型元素构成的有限序列,这些元素可以按照顺序排列,使得每个元素都有一个前驱元素和后继元素,除了第一个元素没有前驱,最后一个元素没有后继。本篇将深入探讨线性表的特点、操作以及其...