你必须了解的小知识-html 行转列
程序员文章站
2022-04-13 15:06:23
...
在学习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 行转列的详细内容,更多请关注其它相关文章!
上一篇: 结构和架构的区别是什么?