Jquery对Table表格排序(方法一)
2012-12-22 15:45
489 查看
在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。
为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格进行排序的小功能。
该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个<tr>中的html,同时获取每个<tr>标签下对应获取到的列号的<td>标签中的内容,并取得<th>标签的type属性值,将获取<tr>的html、<td>的内容和<th>的type属性值拼接成字符串添加到数组array中,然后将表格<tr>中的html全部置空,根据type属性值的不同采用不同的方法对<td>的内容进行比较,根据比较结果对数组array进行排序,然后将排序后的数组元素重新赋值给已经置空的<tr>。如果已经对该列排序过了,则直接对数组进行倒置。
先看效果图:
排序前:
按价格排序后
现在来看实现代码吧:
CSS代码:
<style type="text/css"> div { width: 1024px; margin: 0 auto; /*div相对屏幕左右居中*/ } table { border: solid 1px #666; border-collapse: collapse; width: 100%; cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标(通常是一个箭头)*/ } tr { border: solid 1px #666; height: 30px; } table thead tr { background-color: #ccc; } td { border: solid 1px #666; } th { border: solid 1px #666; text-align: center; cursor: pointer; /*光标呈现为指示链接的指针(一只手)*/ } .sequence { text-align: center; } .hover { background-color: #3399FF; } </style>
HTML代码:
<div> <table id="tableSort"> <thead> <tr> <th type="number"> 序号 </th> <th type="string"> 书名 </th> <th type="number"> 价格(元) </th> <th type="string"> 出版时间 </th> <th type="number"> 印刷量(册) </th> <th type="ip"> IP </th> </tr> </thead> <tbody> <tr class="hover"> <td class="sequence"> 1 </td> <td> 狼图腾 </td> <td> 29.80 </td> <td> 2009-10 </td> <td> 50000 </td> <td> 192.168.1.125 </td> </tr> <tr> <td class="sequence"> 2 </td> <td> 孝心不能等待 </td> <td> 29.80 </td> <td> 2009-09 </td> <td> 800 </td> <td> 192.68.1.125 </td> </tr> <tr> <td class="sequence"> 3 </td> <td> 藏地密码2 </td> <td> 28.00 </td> <td> 2008-10 </td> <td> </td> <td> 192.102.0.12 </td> </tr> <tr> <td class="sequence"> 4 </td> <td> 藏地密码1 </td> <td> 24.80 </td> <td> 2008-10 </td> <td> </td> <td> 215.34.126.10 </td> </tr> <tr> <td class="sequence"> 5 </td> <td> 设计模式之禅 </td> <td> 69.00 </td> <td> 2011-12 </td> <td> </td> <td> 192.168.1.5 </td> </tr> <tr> <td class="sequence"> 6 </td> <td> 轻量级 Java EE 企业应用实战 </td> <td> 99.00 </td> <td> 2012-04 </td> <td> 5000 </td> <td> 192.358.1.125 </td> </tr> <tr> <td class="sequence"> 7 </td> <td> Java 开发实战经典 </td> <td> 79.80 </td> <td> 2012-01 </td> <td> 2000 </td> <td> 192.168.1.25 </td> </tr> <tr> <td class="sequence" onclick="sortArray()"> 8 </td> <td> Java Web 开发实战经典 </td> <td> 69.80 </td> <td> 2011-11 </td> <td> 2500 </td> <td> 215.168.54.125 </td> </tr> </tbody> </table> </div>
Jquery代码部分
<script type="text/javascript"> $(function () { var tableObject = $('#tableSort'); //获取id为tableSort的table对象 var tbHead = tableObject.children('thead'); //获取table对象下的thead var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th var tbBody = tableObject.children('tbody'); //获取table对象下的tbody var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr var sortIndex = -1; tbHeadTh.each(function () {//遍历thead的tr下的th var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号 //给表态th增加鼠标位于上方时发生的事件 $(this).mouseover(function () { tbBodyTr.each(function () {//编列tbody下的tr var tds = $(this).find("td"); //获取列号为参数index的td对象集合 $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式 }); }).mouseout(function () {//给表头th增加鼠标离开时的事件 tbBodyTr.each(function () { var tds = $(this).find("td"); $(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式 }); }); $(this).click(function () {//给当前表头th增加点击事件 var dataType = $(this).attr("type");//点击时获取当前th的type属性值 checkColumnValue(thisIndex, dataType); }); }); $("tbody tr").removeClass(); //先移除tbody下tr的所有css类 //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色 $("tbody tr").mouseover(function () { $(this).addClass("hover"); }).mouseout(function () { $(this).removeClass("hover"); }); //对表格排序 function checkColumnValue(index, type) { var trsValue = new Array(); tbBodyTr.each(function () { var tds = $(this).find('td'); //获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中 trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html()); $(this).html(""); }); var len = trsValue.length; if (index == sortIndex) { //如果已经排序了则直接倒序 trsValue.reverse(); } else { for (var i = 0; i < len; i++) { //split() 方法用于把一个字符串分割成字符串数组 //获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip type = trsValue[i].split(".separator")[0]; for (var j = i + 1; j < len; j++) { //获取每行分割后数组的第二个值,即文本值 value1 = trsValue[i].split(".separator")[1]; //获取下一行分割后数组的第二个值,即文本值 value2 = trsValue[j].split(".separator")[1]; //接下来是数字\字符串等的比较 if (type == "number") { value1 = value1 == "" ? 0 : value1; value2 = value2 == "" ? 0 : value2; if (parseFloat(value1) > parseFloat(value2)) { var temp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } else if (type == "ip") { if (ip2int(value1) > ip2int(value2)) { var temp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } else { if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器 var temp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } } } } for (var i = 0; i < len; i++) { $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]); } sortIndex = index; } //IP转成整型 function ip2int(ip) { var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); return num; } }) </script>
相关文章推荐
- jquery.tableSort.js表格排序插件使用方法详解
- vue element table 表格请求后台排序的方法
- jQuery操作表格(table)的常用方法、技巧汇总
- jQuery实现获取table表格第一列值的方法
- jquery实现表格本地排序的方法
- jQuery操作表格(table)的常用方法、技巧汇总
- 使用jQuery实现table表格排序js插件
- TableSort.js表格排序插件使用方法详解
- jQuery+json实现动态创建复杂表格table的方法
- jQuery增加和删除表格项目及实现表格项目排序的方法
- angular jQuery css html混合table表格查询 排序 添加 删除 隔行换色
- jquery实现表格本地排序的方法
- 自己动手丰衣足食之表格排序插件jquery.tableSort.js
- 一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js(附ajax例子)
- 20170726 jQuery操作表格(table)的常用方法、技巧汇总
- jquery对table表格操作(方法二)
- jQuery操作表格(table)的常用方法、技巧汇总
- jQuery操作表格(table)的常用方法、技巧汇总
- jQuery操作表格(table)的常用方法、技巧汇总
- jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽,按列排序,并可以保存排序后的结果