本篇内容介绍了“html表格怎么排序”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

对于表格排序的流程如下：

获取鼠标点击的表头单元格遍历我们所有的数据，从而获取<tr>的内容获取相对应<tr>下的<td>标签，然后我们将获取的<tr>、<td>生成我们的数组，根据不同的<tr>设定来采取不同的方式进行内容对比，这样子在根据比较结果对数组array进行排序 ；然后将排序后的数组元素重新赋值给已经置空的<tr>。 如果已经对该列排序过了，则直接对数组进行倒置。

<html><head><title>表格排序</title><metacharset="utf-8"><metaname="Generator"content="EditPlus"><metaname="Author"content="tschengbin"><metaname="Keywords"content="jquerytableSort"><metaname="Description"content=""><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><styletype="text/css">p{width:1024px;margin:0auto;/*p相对屏幕左右居中*/}table{border:solid1px#666;border-collapse:collapse;width:100%;cursor:default;}tr{border:solid1px#666;height:30px;}tabletheadtr{background-color:#ccc;}td{border:solid1px#666;}th{border:solid1px#666;text-align:center;cursor:pointer;}.sequence{text-align:center;}.hover{background-color:#3399FF;}</style></head><body><p><tableid="tableSort"><thead><tr><thtype="number">序号</th><thtype="string">书名</th><thtype="number">价格（元）</th><thtype="string">出版时间</th><thtype="number">印刷量（册）</th><thtype="ip">IP</th></tr></thead><tbody><trclass="hover"><tdclass="sequence">1</td><td>狼图腾</td><td>29.80</td><td>2009-10</td><td>50000</td><td>192.168.1.125</td></tr><tr><tdclass="sequence">2</td><td>孝心不能等待</td><td>29.80</td><td>2009-09</td><td>800</td><td>192.68.1.125</td></tr><tr><tdclass="sequence">3</td><td>藏地密码2</td><td>28.00</td><td>2008-10</td><td></td><td>192.102.0.12</td></tr><tr><tdclass="sequence">4</td><td>藏地密码1</td><td>24.80</td><td>2008-10</td><td></td><td>215.34.126.10</td></tr><tr><tdclass="sequence">5</td><td>设计模式之禅</td><td>69.00</td><td>2011-12</td><td></td><td>192.168.1.5</td></tr><tr><tdclass="sequence">6</td><td>轻量级JavaEE企业应用实战</td><td>99.00</td><td>2012-04</td><td>5000</td><td>192.358.1.125</td></tr><tr><tdclass="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><tdclass="sequence">8</td><td>JavaWeb开发实战经典</td><td>69.80</td><td>2011-11</td><td>2500</td><td>215.168.54.125</td></tr></tbody></table></p><scripttype="text/javascript">$(document).ready(function(){vartableObject=$('#tableSort');//获取id为tableSort的table对象vartbHead=tableObject.children('thead');//获取table对象下的theadvartbHeadTh=tbHead.find('trth');//获取thead下的tr下的thvartbBody=tableObject.children('tbody');//获取table对象下的tbodyvartbBodyTr=tbBody.find('tr');//获取tbody下的trvarsortIndex=-1;//初始化索引tbHeadTh.each(function(){//遍历thead的tr下的thvarthisIndex=tbHeadTh.index($(this));//获取th所在的列号//鼠标移除和聚焦的效果，不重要$(this).mouseover(function(){//鼠标移开事件tbBodyTr.each(function(){//编列tbody下的trvartds=$(this).find("td");//获取列号为参数index的td对象集合$(tds[thisIndex]).addClass("hover");});}).mouseout(function(){//鼠标聚焦时间tbBodyTr.each(function(){vartds=$(this).find("td");$(tds[thisIndex]).removeClass("hover");});});$(this).click(function(){//鼠标点击事件vardataType=$(this).attr("type");//获取当前点击列的typecheckColumnValue(thisIndex,dataType);//对当前点击的列进行排序（当前索引，排序类型）});});//显示效果，不重要$("tbodytr").removeClass();//先移除tbody下tr的所有css类$("tbodytr").mouseover(function(){$(this).addClass("hover");}).mouseout(function(){$(this).removeClass("hover");});//对表格排序functioncheckColumnValue(index,type){vartrsValue=newArray();//创建一个新的列表tbBodyTr.each(function(){//遍历所有的tr标签vartds=$(this).find('td');//查找所有的td标签//将当前的点击列push到一个新的列表中//包括当前行的类型、当前索引的值，和当前行的值trsValue.push(type+".separator"+$(tds[index]).html()+".separator"+$(this).html());$(this).html("");//清空当前列});varlen=trsValue.length;//获取所有要拍戏的列的长度if(index==sortIndex){//sortIndex=-1trsValue.reverse();//???}else{for(vari=0;i<len;i++){//遍历所有的行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"){//js三元运算如果values1等于''（空）那么，该值就为0，否则改值为当前值value1=value1==""?0:value1;value2=value2==""?0:value2;//parseFloat()函数可解析一个字符串，并返回一个浮点数。//该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。//如果字符串的第一个字符不能被转换为数字，那么parseFloat()会返回NaN。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{//JavaScriptlocaleCompare()方法用本地特定的顺序来比较两个字符串。//说明比较结果的数字。//如果stringObject小于target，则localeCompare()返回小于0的数。//如果stringObject大于target，则该方法返回大于0的数。//如果两个字符串相等，或根据本地排序规则没有区别，该方法返回0。if(value1.localeCompare(value2)>0){//该方法不兼容谷歌浏览器vartemp=trsValue[j];trsValue[j]=trsValue[i];trsValue[i]=temp;}}}}}for(vari=0;i<len;i++){//将排序完的值插入到表格中//:eq(index)匹配一个给定索引值的元素$("tbodytr:eq("+i+")").html(trsValue[i].split(".separator")[2]);//console.log($("tbodytr:eq("+i+")").html())}sortIndex=index;}//IP转成整型？？？？？functionip2int(ip){varnum=0;ip=ip.split(".");//Number()函数把对象的值转换为数字。num=Number(ip[0])*256*256*256+Number(ip[1])*256*256+Number(ip[2])*256+Number(ip[3]);returnnum;}})</script></body></html>

“html表格怎么排序”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！