Javascript 把桌子旋转90度
我有一张像这样的桌子:Javascript 把桌子旋转90度,javascript,jquery,html-table,rotation,Javascript,Jquery,Html Table,Rotation,我有一张像这样的桌子: <table><tbody> <tr><td>a</td><td>1</td></tr> <tr><td>b</td><td>2</td></tr> <tr><td>c</td><td>3</td></tr>
<table><tbody>
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
<tr><td>d</td><td>4</td></tr>
<tr><td>e</td><td>5</td></tr>
<tr><td>f</td><td>6</td></tr>
<tr><td>g</td><td>7</td></tr>
</tbody></table>
<table><tbody>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
<td>e</td><td>f</td><td>g</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td>5</td><td>6</td><td>7</td>
</tr>
</tbody></table>
我需要它来达到这样的目的:
<table><tbody>
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
<tr><td>d</td><td>4</td></tr>
<tr><td>e</td><td>5</td></tr>
<tr><td>f</td><td>6</td></tr>
<tr><td>g</td><td>7</td></tr>
</tbody></table>
<table><tbody>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
<td>e</td><td>f</td><td>g</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td>5</td><td>6</td><td>7</td>
</tr>
</tbody></table>
我对Javascript、jQuery甚至CSS都持开放态度。这将交换任意大小的行和列, 只要所有行都有相同数量的单元格
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> Small Test Page</title>
</head>
<body>
<script>
function tableSwap(){
var t= document.getElementsByTagName('tbody')[0],
r= t.getElementsByTagName('tr'),
cols= r.length, rows= r[0].getElementsByTagName('td').length,
cell, next, tem, i= 0, tbod= document.createElement('tbody');
while(i<rows){
cell= 0;
tem= document.createElement('tr');
while(cell<cols){
next= r[cell++].getElementsByTagName('td')[0];
tem.appendChild(next);
}
tbod.appendChild(tem);
++i;
}
t.parentNode.replaceChild(tbod, t);
}
</script>
<h1> Small Test Page</h1>
<p> <button type= "button" id= "tableSwapBtn" onclick= "tableSwap()">
Swap rows and columns</button> </p>
<table style="width:300px;border:1px" rules="all">
<tbody>
<tr> <td> a</td> <td> 1</td> </tr>
<tr> <td> b</td> <td> 2</td> </tr>
<tr> <td> c</td> <td> 3</td> </tr>
<tr> <td> d</td> <td> 4</td> </tr>
<tr> <td> e</td> <td> 5</td> </tr>
<tr> <td> f</td> <td> 6</td> </tr>
<tr> <td> g</td> <td> 7</td> </tr>
</tbody>
</table>
</body>
</html>
以下是我的解决方案:
我有一个jquery类来完成这个任务。此类还支持表中的rowspan和colspan 用法非常简单:
$('#newtable').tableflip($('#sourcetable'));
下面是类的代码和示例用法:您想操作现有表吗?这到底是为了什么?它总是两列两行还是你需要它更具动态性?@tjameson:总是两行,它基本上是一个需要垂直显示的图例。这也可能让你知道你可以做什么,你可以完全重新创建表。创建一个新表,然后覆盖html替换旧表。因此,您可以创建一个字符串作为新表,然后将html设置为该字符串。这让我省去了几个小时的头痛-