Rumah >hujung hadapan web >html tutorial >你必须了解的小知识-html 行转列

你必须了解的小知识-html 行转列

零下一度asal: 2017-04-25 14:14:462605semak imbas

在学习html的时候，我们需要知道些什么，我们要了解哪些小知识，下面小编就来为大家介绍一下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 = &#39;row2col&#39; /> 
  <p id = "rc"></p> 
  <p id = "time" ></p> 
  <p id = "avgTime"></p> 
      <p id = &#39;show&#39; > 
          
      </p> 
      <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>

Atas ialah kandungan terperinci 你必须了解的小知识-html 行转列. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何将php动态网页转换成html？Artikel seterusnya：html页改成jsp的具体实例代码

Artikel berkaitan

Lihat lagi