你必须了解的小知识-html 行转列
程序员文章站
2022-04-24 20:11:01
...
在学习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 行转列的详细内容，更多请关注其它相关文章！