本文给出了一个例子来说明jQuery如何用分组数据对表头进行排序。分享给大家参考，如下：

下图：

要求：点击表头排序时，“分组”和“分组明细”的数据层次关系不变。

我从网上找了一个常规的表排序，为了满足“分组支持”改了一下，贴在这里备份。

！DOCTYPE HTML PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' HTML xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/HTML；字符集=GB 2312 '/样式类型=' text/CSS ' .列表TBL列表运输署.TBL列出th { border: solid 1px # 000边界崩溃：崩溃；padd : 10pxmargin 3360 15px }/style脚本类型=' text/JavaScript ' src=' http : jquery。量滴js '/脚本标题表排序/标题脚本类型=' text/JavaScript '//排序表Id:表的id，iCol:第几列；数据类型：iCol对应的列显示数据的数据类型函数可排序(th，tableId，iCol，DataType){ var Aschar=''；var deschar=''；var表=文档。getelementbyid(TableID)；//排序标题加背景色for(var t=0；t表。ThEad。行[0]。细胞。长度；t ) { var th=$(table.tHead.rows[0].细胞[t])；var thText=th.html().替换(ascChar ' ').替换(deschar ' ')；if(t==ICol){ th。CSS('背景色'，' # CCC ')；} else { th.css('background-color '，' # fff ')；第。html(THText)；} } var t body=table。测试主体[0]；var colRows=tbody.rowsvar aTrs=新数组；//将得到的行放入数组，备用for(var I=0；i colRows.lengthi ) { //注：如果要求"分组明细不参与排序",把下面的注释去掉即可//if ($(colRows[i]).attr('group ')！=未定义){ ATRs。push(colRows[I])；//} } //判断上一次排列的列和现在需要排列的是否同一个。

var thCol=$(table.tHead.rows[0]).单元格[ICol])；if(表。sort col==ICol){ ATRs。反向()；} else { //如果不是同一列，使用数组的分类方法，传进排序函数aTrs.sort(compareEle(iCol，DataType))；} var oFragment=document。createdocumentfragment()；for(var I=0；I ATRs . lengthi){ of fragment。append child(ATRs[I])；} t车身。appendchild(of fragment)；//记录最后一次排序的列索引table.sortCol=iCol//给排序标题加"升序、降序"小图标显示var th=$(table.tHead.rows[0]).单元格[ICol])；if (th.html().indexOf(Aschar)==-1 th。html().indexOf(deschar)==-1){ th。html(th。html)(Aschar)；} else if (th.html().索引Of(Aschar)！=-1) { th.html(th.html().替换(ascChar，Deschar))；} else if (th.html().indexOf(deschar)！=-1) { th.html(th.html().替换(descChar，as char))；} //重新整理分组var SubRows=$(“#”TableID“tr[parent]”)；for(var t=SubRows。长度-1；t=0；t-){ var parent=$(' # ' TableID ' tr[group=' ' $(SubRows[t]).attr(' parent ')' ']')；parent.after($(子行[t])；} } //将列的类型转化成相应的可以排列的数据类型函数convert(svvalue，DataType){ switch(DataType){ case ' int ' :返回parseInt(svvalue，10)；案例“浮动”:返回parseFloat(SV value)；案例"日期":返回新日期(日期。解析(SV value))；case ' string ' :默认值：返回svvalue。tostring()；} } //排序函数，iCol表示列索引，dataType表示该列的数据类型函数compareEle(iCol，DataType){ 0返回函数(oTR1，OTR 2){ var v value 1=convert(removeHtmlTag)($(OTR 1。单元格[iCol]).html())、DataType)；var vvalue 2=convert(removehtml标记($(OTR 2。单元格[ICol]).html())、DataType)；if(vval E1 vval E2){ return-1；} else { return 1；} };} //去掉超文本标记语言标签函数removehtml标记(html){ return html.replace(/[^/g ' ')；} //jQuery加载完以后，分组行高亮背景，分组明细隐藏$(文档)。ready(function () { $('tr[group]).css(“”背景色，' # ff9 ')；$(“tr[parent]”.hide()；});//点击分组行时，切换分组明细的显示/隐藏函数showSub(a){ var GrouP value=$(a)} .父项()。父项()。attr(' group ')；var subDetails=$(' tr[parent=' group value ' ']')；子细节。toggle()；}/script/head body表id=' TableID ' class=' TBL-列表'单元格填充=' 0 '单元格间距=' 0 '和tr th序号/th onclick=' sortAble(this，' tableId '，1，' string ')' style=' cursor : pointer '姓名/th onclick=' sortAble(this，' tableId '，2，' date ')' style='光标：指针'生日/th onclick=' sortAble(this，' tableId '，3，' int ')' style=' cursor : pointer '年龄th onclick=' sortAble(这个，' tableId '，4， float()' style='光标：指针'工资/th/tr/the ad t body tr Group=' A ' td1/TD tdA href=' # ' onclick=' showSub(this)' Group-A/A/TD td01/12/1982/TD td25/TD TD TD TD TD 1000.50/TD/tr parent=' A ' td2/TD tdA-01/TD td01/09/1982/TD td25/TD TD TD TD TD 2000.10/TD/tr tr parent='希望本文所述对大家jQuery程序设计有所帮助。