将桌子旋转90度
Rotate a table 90 degrees
我有一个看起来像这样的表:
<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都持开放态度。
这将交换任何大小的tbody的行和列,只要行都具有相同数量的单元格。
<!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>
这是我的解决方案:http://jsfiddle.net/mtrwk/19/
$('table').each(function() {
$(this).after("<table><tbody></tbody></table>");
var newTable = $(this).next("table").children("tbody");
$(this).children("tbody").children("tr").each(function(rIndex, rItem){
$(this).children("td").each(function(dIndex, dItem){
if(newTable.children("tr:eq("+dIndex+")").html() == null){
newTable.append("<tr></tr>");
}
newTable.children("tr:eq("+dIndex+")").append($(this)[0].outerHTML);
});
});
});
我有一个jquery类来完成这项任务。此类也支持表中的rowspan和colspan。
用法非常简单:
$('#newtable').tableflip($('#sourcetable'));
以下是该类的代码和示例用法:https://jsfiddle.net/adyhu78/9b1q4ys0/
相关文章:
- 图像在旋转 90 度时脱离父 td
- 如何使我的功能360度旋转并上下移动
- 如何设置对象沿世界x轴旋转90度
- 如何将每个图形旋转90度
- 三.js设置旋转矩阵超过90度时的奇怪行为
- 将 d3.parset 可视化效果旋转 90 度(使可视化效果变为水平而不是垂直)
- CSS3 变换从 360 度旋转到 0 度
- 通过手机加载时,画布图像会将图像旋转 90 度
- 自拍时图像旋转了90度
- d3:计算两个节点之间的线的中点,画一条从它到一个新节点成90度角的线
- html将整个画布旋转90度
- 将2D画布(图像+文本)应用于3D表面,并进行360度旋转/动画-可以使用HTML5/CSS3/Javascript或F
- 未使用Chrome 37中的.transform应用旋转(90度)
- Three.js -当相机以90度角旋转时,为什么在x轴和z轴上旋转会产生相同的效果?
- 顺时针旋转画布90度,更新宽度和高度
- 旋转背景图像的Div 90度使用JQuery
- 根据其他图像的位置旋转图像90度
- 使用three.js和tween.js以90度增量旋转对象以创建360度循环
- 将桌子旋转90度
- 自动从-9度旋转到9度