您的位置:首页 > Web前端 > JavaScript

js 点击表头进行排序

2017-06-09 09:49 513 查看
示例图如下,点击技能ID时进行正反排序



html代码如下:

<thead>
<tr class="text-c">
<th width="25"><input type="checkbox" name="" value=""></th>
<th width="80" num='1' onclick="clickTr(this,1)">技能ID</th>
<th width="80" num='1' onclick="clickTr(this,2)">用户ID</th>
<th width="80">发布时间</th>
<th width="80" class="AgeOrTime">年龄</th>
<th width="120" class="SkillOrNeed">技能种类</th>
<th width="75">服务方式</th>
<th width="60">服务价格</th>
<th width="120">状态</th>
</tr>
</thead>
js代码如下:
//根据数组中object的某一项属性重排序(比较函数)
function objectResort(propertyName,a){
return function(obj1,obj2){
var val1=obj1[propertyName];
var val2=obj2[propertyName];
if(val1<val2){
return -a;
}else if(val1>val2){
return a;
}else {
return 0;
}
}
}

//点击表头进行排序
//obj是表头元素,line是第几列
function clickTr(obj,line){
var length=$('tbody tr').length;
var arr=[];
var str='';//表格内容字符串
var arrString='';
var num=parseInt($(obj).attr('num'));//表头参数,决定正序还是反序
for(var i=0;i<length;i++){
arr[i]={};
arr[i].sort=parseInt($('tbody tr').eq(i).find('td').eq(line).text());//获取重排序的比较项
arrString=$('tbody tr').eq(i).clone();//克隆表格行
arrString=arrString.wrap('<div></div>');//包裹元素
arr[i].string=arrString.parent().html();//获取表格行结构字符串
};
arr.sort(objectResort('sort',-num));
$(obj).attr('num',-num);
for(var j=0;j<arr.length;j++){
str+=arr[j].string;
};
$('.table tbody').html(str);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息