在学习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 = 'row2col' />
<p id = "rc"></p>
<p id = "time" ></p>
<p id = "avgtime"></p>
<p id = 'show' >
</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>
以上就是你必须了解的小知识-html 行转列的详细内容。