模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
层和布局特效代码
>
收藏
分享
查看评论
层和布局
演示
自写的JS表格排序_层和布局特效
查看演示效果
特效Tag:
表格排序
添加
自写的JS表格排序,目前仅支持数字排序,其他的可以扩展sort和配置来实现,并且目前只支持单行表头,欢迎一起交流。
<title>JS表格排序</title> <script type="text/javascript"> var tableSort = {}; (function() { var oTable = {}; var cellStatus = {}; var sortCells = {}; var limit = {}; var $ = function(id) { return document.getElementById(id); } var objKeyExists = function(key, search) { if (typeof key != 'number' && typeof key != 'string') { return false; } for (k in search) { if (k == key) { return true; } } return false; } var _addEvent = function(tableId, cellId) { oTable[tableId].rows[0].cells[cellId].onclick = function() { tableSort.sort(tableId, cellId); } } var _addStyle = function(tableId, cellId) { oTable[tableId].rows[0].cells[cellId].style.cursor = 'pointer'; } var _addTitle = function(tableId, cellId) { oTable[tableId].rows[0].cells[cellId].title = '点击排序'; } var _sortTable = function(tableId, cellId) { var rows = oTable[tableId].tBodies[0].rows; var _rows = []; for (var i = 1; i < rows.length; i++) { _rows.push(rows[i]); } var status = -1; if (objKeyExists(cellId, cellStatus[tableId])) { status = 0 - cellStatus[tableId][cellId]; } cellStatus[tableId][cellId] = status; if (status == 1) { oTable[tableId].rows[0].cells[cellId].innerHTML += ' <span style="font-family:webdings;">5</span>'; _rows.sort((function(id){ return function(a, b) { return _sort(a, b, id); } }(cellId))); } else { oTable[tableId].rows[0].cells[cellId].innerHTML += ' <span style="font-family:webdings;">6</span>'; _rows.sort((function(id){ return function(a, b) { return _rsort(a, b, id); } }(cellId))); } var oFragment = document.createDocumentFragment(); for (var i = 0; i < _rows.length; i++) { _rows[i].className = i % 2 ? 'tr' : 'tr_spec'; _rows[i].cells[0].className = i % 2 ? 'td_spec2' : 'td_spec1'; if (limit[tableId] > 0) { if (i >= limit[tableId]) { _rows[i].style.display = 'none'; } else { _rows[i].style.display = ''; } } oFragment.appendChild(_rows[i]); } oTable[tableId].tBodies[0].appendChild(oFragment); } var _cleanStatus = function(tableId, cellId) { for(var i = 0; i < sortCells[tableId].length; i++) { oTable[tableId].rows[0].cells[sortCells[tableId][i]].innerHTML = oTable[tableId].rows[0].cells[sortCells[tableId][i]].innerHTML.replace(/ <span style=\"font-family\: webdings\">[56]<\/span>$/ig, ''); } } var _sort = function(a, b, id) { var param1 = a.cells[id].innerText; var param2 = b.cells[id].innerText; param1 = param1.replace(/[^\d.-]/g, ''); param2 = param2.replace(/[^\d.-]/g, ''); if (param1 == '-' || param1 == '') { return 1; } if (param2 == '-' || param2 == '') { return -1; } //如果两个参数均为字符串类型 if (isNaN(param1) && isNaN(param2)){ return param1.localeCompare(param2); } //如果参数1为数字,参数2为字符串 if (!isNaN(param1) && isNaN(param2)){ return -1; } //如果参数1为字符串,参数2为数字 if (isNaN(param1) && !isNaN(param2)){ return 1; } //如果两个参数均为数字 if (!isNaN(param1) && !isNaN(param2)){ if (Number(param1) > Number(param2)) { return 1; } if (Number(param1) == Number(param2)) { return 0; } if (Number(param1) < Number(param2)) { return -1; } } //return a.cells[id].innerText - b.cells[id].innerText; } var _rsort = function(a, b, id) { var param1 = b.cells[id].innerText; var param2 = a.cells[id].innerText; param1 = param1.replace(/[^\d.-]/g, ''); param2 = param2.replace(/[^\d.-]/g, ''); if (param1 == '-' || param1 == '') { return -1; } if (param2 == '-' || param2 == '') { return 1; } //如果两个参数均为字符串类型 if (isNaN(param1) && isNaN(param2)){ return param1.localeCompare(param2); } //如果参数1为数字,参数2为字符串 if (!isNaN(param1) && isNaN(param2)){ return -1; } //如果参数1为字符串,参数2为数字 if (isNaN(param1) && !isNaN(param2)){ return 1; } //如果两个参数均为数字 if (!isNaN(param1) && !isNaN(param2)){ if (Number(param1) > Number(param2)) { return 1; } if (Number(param1) == Number(param2)) { return 0; } if (Number(param1) < Number(param2)) { return -1; } } //return b.cells[id].innerText - a.cells[id].innerText; } tableSort = { init : function(tableId, cells, rows) { oTable[tableId] = $(tableId); sortCells[tableId] = cells; cellStatus[tableId] = {}; limit[tableId] = rows ? rows : 0; for (var i = 0; i < cells.length; i++) { _addEvent(tableId, cells[i]); _addStyle(tableId, cells[i]); _addTitle(tableId, cells[i]); } if (rows > 0) { for (var i = 1; i < $(tableId).rows.length; i++) { if (i > rows) { $(tableId).rows[i].style.display = 'none'; } } } }, sort : function(tableId, cellId) { _cleanStatus(tableId, cellId); _sortTable(tableId, cellId); } } })(); </script> <style type="text/css"> *{font-size:12px;} </style> <table id="t1" width="400" border="1"> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> <td>第四列</td> <td>第五列</td> </tr> <tr> <td>1</td> <td>4</td> <td>-0.1</td> <td>2009-01-01</td> <td>-</td> </tr> <tr> <td>2</td> <td>3</td> <td>-0.3</td> <td>2008-01-01</td> <td>-</td> </tr> <tr> <td>3</td> <td>2</td> <td>4</td> <td>2008-03-01</td> <td>-</td> </tr> <tr> <td>4</td> <td>1</td> <td>-0.1</td> <td>2009-02-01</td> <td>-</td> </tr> </table> <br /> <table id="t2" width="400" border="1"> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> <td>第四列</td> <td>第五列</td> </tr> <tr> <td>1</td> <td>4</td> <td>-0.1</td> <td>2009-01-01</td> <td>-</td> </tr> <tr> <td>2</td> <td>3</td> <td>-0.3</td> <td>2008-01-01</td> <td>-</td> </tr> <tr> <td>3</td> <td>2</td> <td>4</td> <td>2008-03-01</td> <td>-</td> </tr> <tr> <td>4</td> <td>1</td> <td>-0.1</td> <td>2009-02-01</td> <td>-</td> </tr> </table> <script type="text/javascript"> tableSort.init('t1', [0, 1, 2, 3]); tableSort.init('t2', [0, 1, 2, 3], 2); </script>
所属频道:
层和布局特效
/
更新时间:2012-12-23
[收藏]
[报错]
[返回列表]
相关
层和布局特效
:
表格内容排序sortTable
行变成列,列变成行
文本输入限制
拆分单元格
控制表格内的滚动条
颜色交替的表格
JS计算里面有多少个
极酷的表格
会动的表格
可拖动单元格
变色表格
访问表格的每个TD
层和布局特效Rss订阅
特效代码搜索
层和布局特效推荐
VML圆角圆边框的实现
让网页左右反转的JS代码
CSS中first-letter伪类的用法
DIV+CSS一行三列布局的网页
CSS滑动门及选项卡,布局在同一页面
纯CSS无图实现DIV边框平滑阴影
CSS+JS鼠标悬停单元格变色
飘出的广告窗口,可以自动关闭
CSS实现左右、上下不封闭边框的表格
Table+CSS实现的TAB选项卡
猜你也喜欢看这些
CSS背景渐变,从左往右渐变
鼠标滑向表格,变换背景图片
随机背景颜色的实现
runtimeStyle #079;bject
清爽配色15套
在一定时间内打开一个新的窗口
页面载入时的进度条效果的实现
网页风格适时切换
JavaScript点击图片自动复制图片地址
CSS给网页上的评论文本框加上提醒功能背景图片
相关链接:
复制本页链接
|
搜索自写的JS表格排序
特效说明:
层和布局模板
-
自写的JS表格排序
。