您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
html表格排序的流程为: 1 获取鼠标点击的 表头单元格 的列号 2 遍历所有的数据行,获取每个<tr>中的html 3 同时获取每个<tr>标签下对应获取到的列号的<td>标签中的内容 4 并取得<th>标签的type属性值(number string ip) 5 将获取<tr>的html、<td>的内容和<th>的type属性值拼接成字符串添加到数组array中 6 然后将表格<tr>中的html全部置空 7 根据type属性值的不同采用不同的方法对<td>的内容进行比较 8 根据比较结果对数组array进行排序 9 然后将排序后的数组元素重新赋值给已经置空的<tr> 10 如果已经对该列排序过了,则直接对数组进行倒置 提供数值、字符串以及IP地址三种类型的排序规则。字符串类型排序规则采用javascript的localeCompare方法。 具体代码: <!DOCTYPE HTML> <html> <head> <title> 表格排序 </title> <meta charset="utf-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content="tschengbin"> <meta name="Keywords" content="jquery tableSort"> <meta name="Description" content=""> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> div{ width: 1024px; margin: 0 auto;/*div相对屏幕左右居中*/ } table{ border: solid 1px #666; border-collapse: collapse; width: 100%; cursor: 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> </head> <body> <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">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> <script type="text/javascript"> $(document).ready(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所在的列号 //鼠标移除和聚焦的效果,不重要 $(this).mouseover(function(){ //鼠标移开事件 tbBodyTr.each(function(){//编列tbody下的tr var tds = $(this).find("td");//获取列号为参数index的td对象集合 $(tds[thisIndex]).addClass("hover"); }); }).mouseout(function(){ //鼠标聚焦时间 tbBodyTr.each(function(){ var tds = $(this).find("td"); $(tds[thisIndex]).removeClass("hover"); }); }); $(this).click(function() { //鼠标点击事件 var dataType = $(this).attr("type"); //获取当前点击列的 type checkColumnValue(thisIndex, dataType); //对当前点击的列进行排序 (当前索引,排序类型) }); }); //显示效果,不重要 $("tbody tr").removeClass();//先移除tbody下tr的所有css类 $("tbody tr").mouseover(function(){ $(this).addClass("hover"); }).mouseout(function(){ $(this).removeClass("hover"); }); //对表格排序 function checkColumnValue(index, type) { var trsValue = new Array(); //创建一个新的列表 tbBodyTr.each(function() { //遍历所有的tr标签 var tds = $(this).find('td');//查找所有的 td 标签 //将当前的点击列 push 到一个新的列表中 //包括 当前行的 类型、当前索引的 值,和当前行的值 trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html()); $(this).html("");//清空当前列 }); var len = trsValue.length;//获取所有要拍戏的列的长度 if(index == sortIndex){//sortIndex =-1 trsValue.reverse();//??? } else { for(var i = 0; i < len; i++){//遍历所有的行 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"){ //js 三元运算 如果 values1 等于 '' (空) 那么,该值就为0,否则 改值为当前值 value1 = value1 == "" ? 0 : value1; value2 = value2 == "" ? 0 : value2; //parseFloat() 函数可解析一个字符串,并返回一个浮点数。 //该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。 //如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。 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 { //JavaScript localeCompare() 方法 用本地特定的顺序来比较两个字符串。 //说明比较结果的数字。 // 如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。 // 如果 stringObject 大于 target,则该方法返回大于 0 的数。 // 如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0。 if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器 var temp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } } } } for(var i = 0; i < len; i++){ //将排序完的 值 插入到 表格中 //:eq(index) 匹配一个给定索引值的元素 $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]); //console.log($("tbody tr:eq(" + i + ")").html()) } sortIndex = index; } //IP转成整型 ????? function ip2int(ip){ var num = 0; ip = ip.split("."); //Number() 函数把对象的值转换为数字。 num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); return num; } }) </script> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。