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"> </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> <a href="javascript:void(0)" id="delSelect">删除</a></th> 110 <th align="left"> </th> 111 <th> </th> 112 <th> </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页面,运行查看效果。
版权声明
翻译的文章,版权归原作者所有,只用于交流与学习的目的。
原创文章,版权归作者所有,非商业转载请注明出处,并保留原文的完整链接。