html 行转列

最新推荐文章于 2023-10-25 23:00:00 发布

longnihao

最新推荐文章于 2023-10-25 23:00:00 发布

阅读量2.6k

点赞数

分类专栏： html js 文章标签： html function border div table date

本文链接：https://blog.csdn.net/longnihao/article/details/6818409

版权

html js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

 

<!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>