当前位置:编程学习 > JAVA >>

html 行转列

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head>  
    <title>行转列</title>    
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
    <script type = "text/javascript"> 
        $(function(){ 
             
            var trs = $("#table tr"); 
            var tdLength = $("#table > tbody > tr:eq(1) > td").length;  
            $("#rc").html("rows:" + trs.length + "\t columns:" + tdLength); 
            var times = new Array(); 
            $("#row2col").click(function(){  
                var begin = new Date();  
                var newTable = $("<table></table>").css({"border":"1px red solid"}).attr("border","1"); 
                newTable.appendTo($("#show"));  
 
                for(var i = 0; i < tdLength; i++){ 
                    var tr = $("<tr></tr>"); 
                    trs.each(function(index){  
                        var td = $("td:eq("+i+")",$(this));  
                        tr.append(td.clone()); 
                    }); 
                    newTable.append(tr); 
                }  
                 
                var end = new Date(); 
                var totalTime = end.getTime() - begin.getTime(); 
 
                times.push(totalTime);   
 
                $("#time").append( "times:"+ totalTime + "<br/>"); 
                $("#avgTime").html(function(){ 
                    var totals = 0; 
                    var count = times.length; 
                    for(var i in times){ 
                        totals += times[i]; 
                    }  
                    return "平均时间:" + (totals/count) + "mm"; 
                }); 
            }); 
        }); 
    </script> 
  </head> 
   
  <body>   
  <input type = "button" value = "row2col" id = 'row2col' /> 
  <div id = "rc"></div> 
  <div id = "time" ></div> 
  <div id = "avgTime"></div> 
      <div id = 'show' > 
          
      </div> 
      <table border = "1" id = "table"> 
           <tr> 
            <td>1</td> 
            <td>2</td> 
            <td>3</td> 
            <td>4</td> 
           </tr> 
           <tr> 
            <td>1</td> 
            <td>2</td> 
            <td>3</td> 
            <td>4</td> 
           </tr> 
           <tr> 
            <td>1</td> 
            <td>2</td> 
            <td>3</td> 
            <td>4</td> 
           </tr> 
       </table>  
       
  </body> 
</html> 

摘自 longnihao的专栏
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,