zoukankan      html  css  js  c++  java
  • JavaScript控制网页内表格TABLE排序


    http://www.corange.cn//uploadfiles/20100418-4_31005.png



    代码
      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      2 <html xmlns="http://www.w3.org/1999/xhtml"> 
      3 <head> 
      4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
      5 <title>JavaScript控制网页内表格排序</title> 
      6 <style> 
      7 *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} 
      8 body{text-align:center;} 
      9 table{margin:100px auto;} 
     10 td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} 
     11 .red{color:red;} 
     12 .top{background:#CCCCCC;cursor:pointer;} 
     13 .up{background:#FFFFCC url(up.gif) no-repeat right 5px;} 
     14 .down{background:#FFFFCC url(down.gif) no-repeat right 5px;} 
     15 .hov{background:#F0EFE5;} 
     16 </style> 
     17 </head> 
     18 <body> 
     19 <table cellpadding="0" id="table"> 
     20 <tr class="top"><td>点击排序</td><td >点击排序</td><td>点击排序</td><td>点击排序</td></tr> 
     21 <tr> 
     22 <td><span id="bfn_la_bac.usa">15.43</span></td> 
     23 <td class="red">700</td> 
     24 <td>1.220</td> 
     25 <td class="red">www.corange.cn</td> 
     26 </tr> 
     27 <tr><td><span id="bfn_la_c.usa">7.05</span></td> 
     28 <td class="red">4</td> 
     29 <td>3,000</td> 
     30 <td class="red">asp</td> 
     31 </tr> 
     32 <tr><td><span id="bfn_la_jpm.usa">30.62</span></td> 
     33 <td class="red">30</td> 
     34 <td>2,558,800</td> 
     35 <td class="red">php</td> 
     36 </tr> 
     37 <tr> 
     38 <td><span id="bfn_la_axp.usa">22.30</span></td> 
     39 <td class="red">5</td><td>6</td> 
     40 <td class="red">js</td> 
     41 </tr> 
     42 <tr><td><span id="bfn_la_mrk.usa">26.31</span></td> 
     43 <td class="red">0.6</td><td>5</td> 
     44 <td class="red">网站开发</td> 
     45 </tr> 
     46 <tr><td><span id="bfn_la_pg.usa">63.16</span></td> 
     47 <td class="red">7</td><td>4</td> 
     48 <td class="red"></td> 
     49 </tr> 
     50 </table> 
     51 <script type="text/javascript"> 
     52 
     53 var tableSort = function(){ 
     54 this.initialize.apply(this,arguments); 
     55 
     56 
     57 tableSort.prototype = { 
     58 
     59 initialize : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){ 
     60 this.Table = document.getElementById(tableId); 
     61 this.rows = this.Table.rows;//所有行 
     62 this.Tags = this.rows[clickRow-1].cells;//标签td 
     63 this.up = classUp; 
     64 this.down = classDown; 
     65 this.startRow = startRow; 
     66 this.selectClass = selectClass; 
     67 this.endRow = (endRow == 999? this.rows.length : endRow); 
     68 this.T2Arr = this._td2Array();//所有受影响的td的二维数组 
     69 this.setShow(); 
     70 }, 
     71 //设置标签切换 
     72 setShow:function(){ 
     73 var defaultClass = this.Tags[0].className; 
     74 for(var Tag ,i=0;Tag = this.Tags[i];i++){ 
     75 Tag.index = i; 
     76 addEventListener(Tag ,'click', Bind(Tag,statu)); 
     77 
     78 var _this =this
     79 var turn = 0
     80 function statu(){ 
     81 for(var i=0;i<_this.Tags.length;i++){ 
     82 _this.Tags[i].className = defaultClass; 
     83 
     84 if(turn==0){ 
     85 addClass(this,_this.down) 
     86 _this.startArray(0,this.index); 
     87 turn=1
     88 }else
     89 addClass(this,_this.up) 
     90 _this.startArray(1,this.index); 
     91 turn=0
     92 
     93 
     94 }, 
     95 //设置选中列样式 
     96 colClassSet:function(num,cla){ 
     97 //得到关联到的td 
     98 for(var i= (this.startRow-1);i<(this.endRow);i++){ 
     99 for(var n=0;n<this.rows[i].cells.length;n++){ 
    100 removeClass(this.rows[i].cells[n],cla); 
    101 
    102 addClass(this.rows[i].cells[num],cla); 
    103 
    104 }, 
    105 //开始排序 num 根据第几列排序 aord 逆序还是顺序 
    106 startArray:function(aord,num){ 
    107 var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序后的二维数组传到排序方法中去 
    108 this.array2Td(num,afterSort);//输出 
    109 }, 
    110 //将受影响的行和列转换成二维数组 
    111 _td2Array:function(){ 
    112 var arr=[]; 
    113 for(var i=(this.startRow-1),l=0;i<(this.endRow);i++,l++){ 
    114 arr[l]=[]; 
    115 for(var n=0;n<this.rows[i].cells.length;n++){ 
    116 arr[l].push(this.rows[i].cells[n].innerHTML); 
    117 
    118 
    119 return arr; 
    120 }, 
    121 //根据排序后的二维数组来输出相应的行和列的 innerHTML 
    122 array2Td:function(num,arr){ 
    123 this.colClassSet(num,this.selectClass); 
    124 for(var i= (this.startRow-1),l=0;i<(this.endRow);i++,l++){ 
    125 for(var n=0;n<this.Tags.length;n++){ 
    126 this.rows[i].cells[n].innerHTML = arr[l][n]; 
    127 
    128 
    129 }, 
    130 //传进来一个二维数组,根据二维数组的子项中的w项排序,再返回排序后的二维数组 
    131 sortMethod:function(arr,aord,w){ 
    132 //var effectCol = this.getColByNum(whichCol); 
    133 arr.sort(function(a,b){ 
    134 = killHTML(a[w]); 
    135 = killHTML(b[w]); 
    136 = x.replace(/,/g,''); 
    137 = y.replace(/,/g,''); 
    138 switch (isNaN(x)){ 
    139 case false
    140 return Number(x) - Number(y); 
    141 break
    142 case true
    143 return x.localeCompare(y); 
    144 break
    145 
    146 }); 
    147 arr = aord==0?arr:arr.reverse(); 
    148 return arr; 
    149 
    150 
    151 /*-----------------------------------*/ 
    152 function addEventListener(o,type,fn){ 
    153 if(o.attachEvent){o.attachEvent('on'+type,fn)} 
    154 else if(o.addEventListener){o.addEventListener(type,fn,false)} 
    155 else{o['on'+type] = fn;} 
    156 
    157 
    158 function hasClass(element, className) { 
    159 var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 
    160 return element.className.match(reg); 
    161 
    162 
    163 function addClass(element, className) { 
    164 if (!this.hasClass(element, className)) 
    165 
    166 element.className += " "+className; 
    167 
    168 
    169 
    170 function removeClass(element, className) { 
    171 if (hasClass(element, className)) { 
    172 var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 
    173 element.className = element.className.replace(reg,' '); 
    174 
    175 
    176 
    177 var Bind = function(object, fun) { 
    178 return function() { 
    179 return fun.apply(object, arguments); 
    180 
    181 
    182 //去掉所有的html标记 
    183 function killHTML(str){ 
    184 return str.replace(/<[^>]+>/g,""); 
    185 
    186 //------------------------------------------------ 
    187 //tableid 第几行是标签行,从第几行开始排序,第几行结束排序(999表示最后) 升序标签样式,降序标签样式 选中列样式 
    188 //注意标签行的class应该是一致的 
    189 var ex1 = new tableSort('table',1,2,999,'up','down','hov'); 
    190 </script> 
    191 
    192 
    193 <br><br> 
    194 </body> 
    195 </html> 
    http://www.corange.cn//uploadfiles/sorttable2_38545.rar

    原文地址:http://www.corange.cn/archives/2010/04/3599.html
  • 相关阅读:
    BZOJ 5314: [Jsoi2018]潜入行动
    BZOJ 3420: Poi2013 Triumphal arch
    BZOJ 1135: [POI2009]Lyz
    BZOJ 4247: 挂饰
    本地
    生成config文件到内存中
    微信获取access_token和curl
    php生成静态页面
    curl
    分页
  • 原文地址:https://www.cnblogs.com/zerogo/p/1718211.html
Copyright © 2011-2022 走看看