最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery实现的table排序功能示例
时间:2017-06-16 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
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; }
$(function() { vartableObject = $('#tableSort');//获取id为tableSort的table对象 vartbHead = tableObject.children('thead');//获取table对象下的thead vartbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th vartbBody = tableObject.children('tbody');//获取table对象下的tbody vartbBodyTr = tbBody.find('tr');//获取tbody下的tr varsortIndex = -1; tbHeadTh.each(function() {//遍历thead的tr下的th varthisIndex = tbHeadTh.index($(this));//获取th所在的列号 //给表态th增加鼠标位于上方时发生的事件 $(this).mouseover(function() { tbBodyTr.each(function() {//编列tbody下的tr vartds = $(this).find("td");//获取列号为参数index的td对象集合 $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式 }); }).mouseout(function() {//给表头th增加鼠标离开时的事件 tbBodyTr.each(function() { vartds = $(this).find("td"); $(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式 }); }); $(this).click(function() {//给当前表头th增加点击事件 vardataType = $(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"); }); //对表格排序 functioncheckColumnValue(index, type) { vartrsValue =newArray(); tbBodyTr.each(function() { vartds = $(this).find('td'); //获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中 trsValue.push(type +".separator"+ $(tds[index]).html() +".separator"+ $(this).html()); $(this).html(""); }); varlen = trsValue.length; if(index == sortIndex) { //如果已经排序了则直接倒序 trsValue.reverse(); }else{ for(vari = 0; i < len; i++) { //split() 方法用于把一个字符串分割成字符串数组 //获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip type = trsValue[i].split(".separator")[0]; for(varj = 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)) { vartemp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } }elseif(type =="ip") { if(ip2int(value1) > ip2int(value2)) { vartemp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } }else{ if(value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器 vartemp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } } } } for(vari = 0; i < len; i++) { $("tbody tr:eq("+ i +")").html(trsValue[i].split(".separator")[2]); } sortIndex = index; } //IP转成整型 functionip2int(ip) { varnum = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); returnnum; } })
|
运行效果图如下:
-
下一个: JS实现的自动打字效果示例
相关文章
- jquery 拖拽排序插件Sortable使用方法 07-25
- 得用jquery对table的tr重新排序 03-22
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31