javascript -表格排序

知识点：

Array方法：

   sort:降序

   reverse:反序

效果：

 

代码：

  1 <style>
  2 *{
  3     margin: 0;
  4     padding: 0;
  5 }
  6 #tableSort{
  7     line-height: 22px;
  8     background: #ccc;
  9 }
 10 #tableSort thead,
 11 #tableSort tfoot{
 12     background: #066;
 13     color: #fff;
 14     font-size: 14px;
 15 }
 16 #tableSort thead a,
 17 #tableSort tfoot a{
 18     color: #fff;
 19 }
 20 #tableSort tfoot{
 21     background: #069;
 22 }
 23 #tableSort tbody td{
 24     background: #fff;
 25     padding: 3px 5px;
 26     font-size: 12px;
 27 }
 28 </style>
 29 <table width="500" border="0" cellspacing="1" cellpadding="0" id="tableSort">
 30 <thead>
 31   <tr>
 32     <th width="31" align="center">&nbsp;</th>
 33     <th width="104">商品名称</th>
 34     <th width="104">商品描述</th>
 35     <th width="124" id="timeSort" _isDesc="false">上架时间</th>
 36     <th width="82"  id="priceSort" _isDesc="false">价格</th>
 37     <th width="48">操作</th>
 38   </tr>
 39   </thead>
 40   <tbody>
 41   <tr>
 42     <td align="center"><input type="checkbox" name="checkbox3" id="checkbox2" _op="check" /></td>
 43     <td>1</td>
 44     <td>12312312313</td>
 45     <td>2013-5-8</td>
 46     <td>￥120</td>
 47     <td align="center"><a href="javascript:void(0)" _op="del">删除</a></td>
 48   </tr>
 49   <tr>
 50     <td align="center"><input type="checkbox" name="checkbox4" id="checkbox3" _op="check" /></td>
 51     <td>2</td>
 52     <td>顶戴</td>
 53     <td>2013-5-12</td>
 54     <td>￥140</td>
 55     <td align="center"><a href="javascript:void(0)" _op="del">删除</a></td>
 56   </tr>
 57   <tr>
 58     <td align="center"><input type="checkbox" name="checkbox5" id="checkbox4" _op="check"  /></td>
 59     <td>3</td>
 60     <td>欠工</td>
 61     <td>2013-4-8</td>
 62     <td>￥320</td>
 63     <td align="center"><a href="javascript:void(0)" _op="del">删除</a></td>
 64   </tr>
 65   <tr>
 66     <td align="center"><input type="checkbox" name="checkbox6" id="checkbox5" _op="check"  /></td>
 67     <td>4</td>
 68     <td>七七</td>
 69     <td>2013-8-8</td>
 70     <td>￥520</td>
 71     <td align="center"><a href="javascript:void(0)" _op="del">删除</a></td>
 72   </tr>
 73   <tr>
 74     <td align="center"><input type="checkbox" name="checkbox7" id="checkbox6" _op="check" /></td>
 75     <td>5</td>
 76     <td>苛</td>
 77     <td>2013-5-25</td>
 78     <td>￥820</td>
 79     <td align="center"><a href="javascript:void(0)" _op="del">删除</a></td>
 80   </tr>
 81   <tr>
 82     <td align="center"><input type="checkbox" name="checkbox8" id="checkbox7" _op="check" /></td>
 83     <td>6</td>
 84     <td>黄梅雨</td>
 85     <td>2013-5-2</td>
 86     <td>￥120</td>
 87     <td align="center"><a href="javascript:void(0)" _op="del">删除</a></td>
 88   </tr>
 89   <tr>
 90     <td align="center"><input type="checkbox" name="checkbox9" id="checkbox8" _op="check" /></td>
 91     <td>7</td>
 92     <td>工作服</td>
 93     <td>2013-5-18</td>
 94     <td>￥1220</td>
 95     <td align="center"><a href="javascript:void(0)" _op="del">删除</a></td>
 96   </tr>
 97   <tr>
 98     <td align="center"><input type="checkbox" name="checkbox10" id="checkbox9" _op="check" /></td>
 99     <td>8</td>
100     <td>地茜共</td>
101     <td>2013-3-8</td>
102     <td>￥1260</td>
103     <td align="center"><a href="javascript:void(0)" _op="del">删除</a></td>
104   </tr>
105   </tbody>
106   <tfoot>
107   <tr>
108     <th align="center"><input type="checkbox" name="checkbox" id="checkAll" /></th>
109     <th align="left"><a href="javascript:void(0)" id="reserveCheck" >反选</a>&nbsp;&nbsp;<a href="javascript:void(0)" id="delSelect">删除</a></th>
110     <th align="left">&nbsp;</th>
111     <th>&nbsp;</th>
112     <th>&nbsp;</th>
113     <th><a href="#"></a></th>
114   </tr>
115   </tfoot>
116 </table>
117 <script>
118 //批量设置checked值
119 function setChecked(checkBoxs,checked){
120     for(var i=0,len=checkBoxs.length;i<len;i++){
121         checkBoxs[i].checked=checked;
122     }    
123 }
124 //批量反置checked值
125 function reverseChecked(checkBoxs){
126     for(var i=0,len=checkBoxs.length;i<len;i++){
127         checkBoxs[i].checked=!checkBoxs[i].checked;    
128     }    
129 }
130 //移除tr值
131 function removeTr(tBody,tr){
132     tBody.removeChild(tr);    
133 }
134 //获取tr
135 function getParentTr(o){
136     while(o){
137         o=o.parentNode;
138         if(o&&o.tagName==="TR"){
139             return o;
140         }
141     }
142 }
143 //arrSort排序
144 function arrSort(arr,isDesc){
145     var arr=arr.sort(function(num1,num2){
146         return num1-num2;                          
147     });
148     if(isDesc){//desc
149         arr.reverse();
150     }
151     return arr;
152 }
153 //表格排序
154 function tableSort(tablePart,col,fun,isDesc){
155     var arrNum=[],trs={};
156     
157     for(var i=0,len=tablePart.rows.length;i<len;i++){
158         var td=tablePart.rows[i].cells[col];
159         var num=fun(td);    
160         arrNum.push(num);
161         trs["id"+num]=trs["id"+num]||[];
162         trs["id"+num].push(getParentTr(td));        
163     }
164     arrNum=arrSort(arrNum,isDesc);    
165     for(var j=0,jlen=arrNum.length;j<jlen;j++){
166         for(var k=0,klen=trs["id"+arrNum[j]].length;k<klen;k++){
167             var tr=trs["id"+arrNum[j]].pop();
168             tablePart.appendChild(tr);
169         }
170     }
171 }
172 
173 
174 var table=document.getElementById("tableSort");
175 var checkBoxs=table.tBodies[0].getElementsByTagName('input');
176 var checkAll=document.getElementById("checkAll");
177 var reserveCheck=document.getElementById("reserveCheck");
178 var delSelect=document.getElementById("delSelect");
179 var timeSort=document.getElementById("timeSort");
180 var priceSort=document.getElementById("priceSort");
181 
182 checkAll.onclick=function(){
183     setChecked(checkBoxs,this.checked);    
184 }
185 
186 reserveCheck.onclick=function(){
187     reverseChecked(checkBoxs);
188 }
189 table.tBodies[0].onclick=function(e){
190     var ev=e||window.event;
191     var target=ev.target||ev.srcElement;
192     if(!target)return;
193     target._op=target.getAttribute("_op");
194     if(!target._op)return;
195     
196     if(target._op==="check"&&target.type==="checkbox"&&!target.checked){
197         checkAll.checked=target.checked;    
198     }
199     if(target._op==="del"){
200         var tr=getParentTr(target);
201         removeTr(table.tBodies[0],tr);
202     }
203 }
204 delSelect.onclick=function(){
205     var chk=[];
206     for(var i=0,len=checkBoxs.length;i<len;i++){            
207         if(checkBoxs[i].checked){
208             var tr=getParentTr(checkBoxs[i]);
209             chk.push(tr);
210         }    
211     }    
212 
213 
214     for(var j=0,jlen=chk.length;j<jlen;j++){
215         removeTr(table.tBodies[0],chk[j]);
216     }
217 }
218 var sortMark="↑↓";
219 timeSort.onclick=function(){
220     this.isDesc=(this.isDesc===true)?false:true;
221     tableSort(table.tBodies[0],3,function(td){
222         return (new Date(td.innerHTML)).getTime();                                      
223     },this.isDesc);    
224     priceSort.innerHTML="价格"
225     this.innerHTML="上架时间"+sortMark[this.isDesc?1:0];
226 }
227 priceSort.onclick=function(){
228     this.isDesc=(this.isDesc===true)?false:true;
229     tableSort(table.tBodies[0],4,function(td){
230         return parseInt(td.innerHTML.replace("￥",''));                                      
231     },this.isDesc);    
232     timeSort.innerHTML="上架时间";
233     this.innerHTML="价格"+sortMark[this.isDesc?1:0];
234 }
235 
236 </script>

总结：

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

posted @ 2013-05-22 18:49  脚后跟着猫  阅读(795)  评论(2)  编辑  收藏  举报
返回
顶部