代码共享:表格客户端排序,欢迎优化算法

表格客户端排序
来源: http://www.zyhowe.com/index/topicDetail.aspx?type=200100&topicid=288<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript" language="javascript">var TrArray=new Array();
function addSortTableClient(tableid,rowheadnum){
var tableobj = document.getElementById(tableid);
if(!tableobj) return;   
   
//1.1 先补充colspan
    for(var i=0;i<rowheadnum;i++){
      var r=tableobj.rows[i];
      for(var j=r.cells.length-1;j>=0;j--){
              var c=r.cells[j];
              if(c.colSpan>1){
                 for(k=1;k<=c.colSpan-1;k++){                                    
                    var newtd=tableobj.rows[i].insertCell(j+1);
                    //newtd.innerHTML=i+"_"+j+"_"+(j+k);  
                    newtd.style.display="none"; 
                 }
                // c.colSpan=1;
              }
          }
     }    //1.2 再补充rowspan
for(var i=rowheadnum-1;i>=0;i--){
    var r=tableobj.rows[i];
    for(var j=r.cells.length-1;j>=0;j--){
            var c=r.cells[j];
            if(c.rowSpan>1){
                for(k=1;k<=c.rowSpan-1;k++){
                    var newtd=tableobj.rows[i+k].insertCell(j);
                    newtd.style.display="none";
                }
                //c.rowSpan=1;
            }
        }
}
   
//2.复制所有TBODY内所有TR到数组
for(var i=0;i<tableobj.rows.length-rowheadnum;i++){
       TrArray[i]=tableobj.rows[i+rowheadnum];
    }   
    
    //3.添加列头排序
for(var i=0;i<rowheadnum&&i<tableobj.rows.length;i++){
    var r = tableobj.rows[i];
    for(var j=0;j<r.cells.length;j++){    
   var c = r.cells[j];
   var s = c.innerHTML;
   if(c.type=="")c.type="Number";
   c.innerHTML = "<a href='#' onclick='javascript:sortTableClient(\""+tableid+"\",\""+rowheadnum+"\",\""+i+"\",\""+j+"\",\""+c.type+"\",\"asc\");'>"+s+"</a>";
    } 
}
} 
var oldcolIndex=-1;
var oldrowIndex=-1;
function sortTableClient(tableid,rowheadnum,rowIndex,colIndex,typename,sortby){  
     var tableobj = document.getElementById(tableid);
 if(!tableobj) return;
 //alert(rowIndex+","+colIndex);
 function CaseInsensitiveString(s){//转换为大写
        return String(s).toUpperCase();
     }
     function parseDate(s){//转换为毫秒的时间
        return Date.parse(s.replace(/\-/g,"/"));
     }
     function parseNumber(s){
        return parseFloat(s.replace(/,/,""));
     }     var fTypeCast=String;//未指定的时候的方式
     switch(typename){
        case "Date"://时间的处理方式
            fTypeCast=parseDate;
            break;
        case "CaseInsensitiveString"://大小写不区分
            fTypeCast=CaseInsensitiveString;
            break;
        case "Number"://数字的处理方式
            fTypeCast=parseNumber;
            break;
default: 
            fTypeCast=String;
            break;
      }
    
      TrArray.sort(
        function (a,b){
            if(fTypeCast(a.cells[colIndex].innerText)<fTypeCast(b.cells[colIndex].innerText))
                return (sortby=="asc")?-1:1;
            if(fTypeCast(a.cells[colIndex].innerText)>fTypeCast(b.cells[colIndex].innerText))
                return (sortby=="asc")?1:-1;
            return 0;
       }
     );
        
     var c = tableobj.rows[rowIndex].cells[colIndex];
     var s = c.innerHTML;
     
     if(sortby=="desc"){
          s=s.replace(/desc/gi,"asc");
          if(s.indexOf("↑")>=0||s.indexOf("↓")>=0){
            s=s.replace(/↓/gi,"↑");
          }else{
            s=s.replace(/<\/A>/gi,"↑</a>"); 
          }                   
 }else if(sortby=="asc"){
  s=s.replace(/asc/gi,"desc");
  if(s.indexOf("↑")>=0||s.indexOf("↓")>=0){
            s=s.replace(/↑/gi,"↓");
          }else{
            s=s.replace(/<\/A>/gi,"↓</a>"); 
          } 
 }
 
c.innerHTML =s;
if(rowIndex!=oldrowIndex||colIndex!=oldcolIndex){
     if(oldcolIndex!=-1&&oldrowIndex!=-1){
        var c1 = tableobj.rows[oldrowIndex].cells[oldcolIndex];
            var s1 = c1.innerHTML;
            s1=s1.replace(/(<img)[^<]*/gi,"");
            c1.innerHTML=s1;
         }
         oldrowIndex=rowIndex;
     oldcolIndex=colIndex;
    }    var k=0;
    for(var i=rowheadnum;i<tableobj.rows.length;i++){
       tableobj.rows[i].swapNode(TrArray[k++]);
    }
}
</script>
<table id='SortTable' width=800 border=1>
<tr>
  <td  nowrap rowspan='2' colspan='1' type='Number' >时间</td>
  <td nowrap rowspan='1' colspan='2' type='Number' >固定资产投资额</td>
  <td nowrap rowspan='1' colspan='2' type='Number' >GDP</td>
</tr>
<tr>
  <td nowrap rowspan='1' colspan='1' type='Number' >累计值(亿元)</td>
  <td nowrap rowspan='1' colspan='1' type='Number' >累计增长(%)</td>
  <td nowrap rowspan='1' colspan='1' type='Number' >累计值(亿元)</td>
  <td nowrap rowspan='1' colspan='1' type='Number' >累计增长(%)</td>
</tr>
<tr>
  <td nowrap>200812</td>
  <td align=right nowrap>148,167.00</td>
  <td align=right nowrap>26.10</td>
  <td align=right nowrap>300,670.00</td>
  <td align=right nowrap>9.00</td>
</tr>
<tr>
   <td nowrap>200809</td>
   <td align=right nowrap>99,870.71</td>
   <td align=right nowrap>27.60</td>
   <td align=right nowrap>201,631.00</td>
   <td align=right nowrap>9.90</td>
</tr>
<tr >
   <td nowrap>200806</td>
   <td align=right nowrap>58,435.98</td>
   <td align=right nowrap>26.80</td>
   <td align=right nowrap>130,619.00</td>
   <td align=right nowrap>10.40</td>
</tr>
<tr >
   <td nowrap>200803</td>
   <td align=right nowrap>18,316.94</td>
   <td align=right nowrap>25.90</td>
   <td align=right nowrap>61,491.00</td>
   <td align=right nowrap>10.60</td>
</tr>
<tr >
   <td nowrap>200712</td>
   <td align=right nowrap>117,413.91</td>
   <td align=right nowrap>25.80</td>
   <td align=right nowrap>246,619.00</td>
   <td align=right nowrap>11.40</td>
</tr>
<tr >
   <td nowrap>200709</td>
   <td align=right nowrap>78,246.78</td>
   <td align=right nowrap>26.40</td>
   <td align=right nowrap>166,043.00</td>
   <td align=right nowrap>11.50</td>
</tr>
<tr >
   <td nowrap>200706</td>
   <td align=right nowrap>46,077.82</td>
   <td align=right nowrap>26.70</td>
   <td align=right nowrap>106,768.00</td>
   <td align=right nowrap>11.50</td>
</tr><tr >
   <td nowrap>200703</td>
   <td align=right nowrap>14,543.61</td>
   <td align=right nowrap>25.30</td>
   <td align=right nowrap>50,287.00</td>
   <td align=right nowrap>11.10</td>
</tr><tr >
   <td nowrap>200612</td>
   <td align=right nowrap>93,472.36</td>
   <td align=right nowrap>24.50</td>
   <td align=right nowrap>210,871.00</td>
   <td align=right nowrap>11.10</td>
</tr><tr >
   <td nowrap>200609</td>
   <td align=right nowrap>61,880.12</td>
   <td align=right nowrap>28.20</td>
   <td align=right nowrap>142,898.30</td>
   <td align=right nowrap>10.80</td>
</tr><tr >
   <td nowrap>200606</td>
   <td align=right nowrap>36,368.35</td>
   <td align=right nowrap>31.30</td>
   <td align=right nowrap>92,369.40</td>
   <td align=right nowrap>11.00</td>
</tr>
<tr >
   <td nowrap>200603</td>
   <td align=right nowrap>11,608.40</td>
   <td align=right nowrap>29.80</td>
   <td align=right nowrap>43,851.00</td>
   <td align=right nowrap>10.40</td>
</tr><tr >
   <td nowrap>200512</td>
   <td align=right nowrap>75,096.48</td>
   <td align=right nowrap>27.20</td>
   <td align=right nowrap>183,867.90</td>
   <td align=right nowrap>10.40</td>
</tr><tr >
   <td nowrap>200509</td>
   <td align=right nowrap>48,741.49</td>
   <td align=right nowrap>27.72</td>
   <td align=right nowrap>125,984.90</td>
   <td align=right nowrap>10.40</td>
</tr><tr >
   <td nowrap>200506</td>
   <td align=right nowrap>27,967.00</td>
   <td align=right nowrap>27.10</td>
   <td align=right nowrap>81,412.80</td>
   <td align=right nowrap>10.50</td>
</tr><tr >
   <td nowrap>200503</td>
   <td align=right nowrap>9,036.68</td>
   <td align=right nowrap>25.30</td>
   <td align=right nowrap>38,848.60</td>
   <td align=right nowrap>10.50</td>
</tr><tr >
   <td nowrap>200412</td>
   <td align=right nowrap>58,620.28</td>
   <td align=right nowrap>27.60</td>
   <td align=right nowrap>136,875.90</td>
   <td align=right nowrap>9.50</td>
</tr><tr >
   <td nowrap>200409</td>
   <td align=right nowrap>38,028.34</td>
   <td align=right nowrap>29.90</td>
   <td align=right nowrap>93,495.20</td>
   <td align=right nowrap>9.50</td>
</tr>
<tr >
   <td nowrap>200406</td>
   <td align=right nowrap>21,843.97</td>
   <td align=right nowrap>31.00</td>
   <td align=right nowrap>59,042.70</td>
   <td align=right nowrap>9.70</td>
</tr><tr >
   <td nowrap>200403</td>
   <td align=right nowrap>7,058.48</td>
   <td align=right nowrap>47.78</td>
   <td align=right nowrap>27,262.00</td>
   <td align=right nowrap>9.80</td>
</tr>
</table>
<script language="javascript">
addSortTableClient("SortTable",2);
</script>
</body>
</html>