知识点：

Array方法：

sort:降序

reverse:反序

效果：

 

代码：

*{

margin: 0;

padding: 0;

}

#tableSort{

line-height: 22px;

background: #ccc;

}

#tableSort thead,

#tableSort tfoot{

background: #066;

color: #fff;

font-size: 14px;

}

#tableSort thead a,

#tableSort tfoot a{

color: #fff;

}

#tableSort tfoot{

background: #069;

}

#tableSort tbody td{

background: #fff;

padding: 3px 5px;

font-size: 12px;

}

 商品名称商品描述上架时间价格操作

1123123123132013-5-8￥120 删除2顶戴2013-5-12￥140 删除3欠工2013-4-8￥320 删除4七七2013-8-8￥520 删除5苛2013-5-25￥820 删除6黄梅雨2013-5-2￥120 删除7工作服2013-5-18￥1220 删除8地茜共2013-3-8￥1260 删除 反选   删除   

//批量设置checked值

function setChecked(checkBoxs,checked){

for(var i=0,len=checkBoxs.length;i

checkBoxs[i].checked=checked;

}

}

//批量反置checked值

function reverseChecked(checkBoxs){

for(var i=0,len=checkBoxs.length;i

checkBoxs[i].checked=!checkBoxs[i].checked;

}

}

//移除tr值

function removeTr(tBody,tr){

tBody.removeChild(tr);

}

//获取tr

function getParentTr(o){

while(o){

o=o.parentNode;

if(o&&o.tagName==="TR"){

return o;

}

}

}

//arrSort排序

function arrSort(arr,isDesc){

var arr=arr.sort(function(num1,num2){

return num1-num2;

});

if(isDesc){//desc

arr.reverse();

}

return arr;

}

//表格排序

function tableSort(tablePart,col,fun,isDesc){

var arrNum=[],trs={};

for(var i=0,len=tablePart.rows.length;i

var td=tablePart.rows[i].cells[col];

var num=fun(td);

arrNum.push(num);

trs["id"+num]=trs["id"+num]||[];

trs["id"+num].push(getParentTr(td));

}

arrNum=arrSort(arrNum,isDesc);

for(var j=0,jlen=arrNum.length;j

for(var k=0,klen=trs["id"+arrNum[j]].length;k

var tr=trs["id"+arrNum[j]].pop();

tablePart.appendChild(tr);

}

}

}

var table=document.getElementById("tableSort");

var checkBoxs=table.tBodies[0].getElementsByTagName('input');

var checkAll=document.getElementById("checkAll");

var reserveCheck=document.getElementById("reserveCheck");

var delSelect=document.getElementById("delSelect");

var timeSort=document.getElementById("timeSort");

var priceSort=document.getElementById("priceSort");

checkAll.onclick=function(){

setChecked(checkBoxs,this.checked);

}

reserveCheck.onclick=function(){

reverseChecked(checkBoxs);

}

table.tBodies[0].onclick=function(e){

var ev=e||window.event;

var target=ev.target||ev.srcElement;

if(!target)return;

target._op=target.getAttribute("_op");

if(!target._op)return;

if(target._op==="check"&&target.type==="checkbox"&&!target.checked){

checkAll.checked=target.checked;

}

if(target._op==="del"){

var tr=getParentTr(target);

removeTr(table.tBodies[0],tr);

}

}

delSelect.onclick=function(){

var chk=[];

for(var i=0,len=checkBoxs.length;i

if(checkBoxs[i].checked){

var tr=getParentTr(checkBoxs[i]);

chk.push(tr);

}

}

for(var j=0,jlen=chk.length;j

removeTr(table.tBodies[0],chk[j]);

}

}

var sortMark="↑↓";

timeSort.onclick=function(){

this.isDesc=(this.isDesc===true)?false:true;

tableSort(table.tBodies[0],3,function(td){

return (new Date(td.innerHTML)).getTime();

},this.isDesc);

priceSort.innerHTML="价格"

this.innerHTML="上架时间"+sortMark[this.isDesc?1:0];

}

priceSort.onclick=function(){

this.isDesc=(this.isDesc===true)?false:true;

tableSort(table.tBodies[0],4,function(td){

return parseInt(td.innerHTML.replace("￥",''));

},this.isDesc);

timeSort.innerHTML="上架时间";

this.innerHTML="价格"+sortMark[this.isDesc?1:0];

}

总结：

完成了基本功能，对于联合排序没有实现。后期会慢慢加入，有兴趣的可以把代码放到html页面，运行查看效果。