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

Question

我有一个带有 3 个单元格的 table，我想知道是否可以在每个单元格之间“旋转”数据？

基本上，所以在设定的时间后，我希望第一个单元格中的数据移动到第二个单元格，第二个单元格的数据移动到第三个单元格，第三个单元格的数据移动到第一个单元格，依此类推上...

我猜它是否可能需要某种形式的 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