是否可以在单元格之间旋转（替换）表格内容？

Question

我有一个table有3个单元格，我想知道我是否可以＆＃34;旋转＆＃34;每个细胞之间的数据？

基本上，经过一段时间后，我希望第一个单元格中的数据移动到第二个单元格，第二个单元格数据移动到第三个单元格，第三个单元格数据移动到第一个单元格，所以上...

我猜测它是否可能需要某种形式的JavaScript？

我对所有可能的解决方案持开放态度

以下是我尝试实现的一个例子：

MY TABLE

<table class="three" width="150" height="35%" border="1"><tr>
<td colspan="2" align="center" valign="bottom" style="font-size:30px;"><strong>T/O: £48k</strong></td></tr>
<tr>
<td width="60" align="center" style="font-size:12px"><strong>GP:£7k</strong>
</td>
<td width="60" align="center" style="font-size:12px"><strong>M:15%</strong>
</td>
</tr>
</table>

Answer 1

我会使用jQuery来执行此操作，因为它需要操作DOM。除此之外，我还将样式与标记分开。

// Store the TRs to a variable
var $tr = $('.three tr');

// Write a function
!function reDraw() {

    // Identify the TDs
    var $td1 = $tr.eq(0).find('td'),
        $td2 = $tr.eq(1).find('td').eq(0),
        $td3 = $tr.eq(1).find('td').eq(1);

    // Reshuffle TDs, and apply correct colspan
    $td2.insertBefore( $td1 ).attr('colspan','2');
    $td1.insertAfter( $td3 ).attr('colspan','1');

    // Refresh after 2 seconds
    setTimeout(reDraw, 2000);
}();

在JS Fiddle

上查看