首頁 > 開發者 > JavaScript

html 行轉列

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!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的專欄

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More