Is it possible to rotate (alternate) table content between cells?

StackOverflow https://stackoverflow.com/questions/23405934

  •  13-07-2023
  •  | 
  •  

Question

I have a table with 3 cells and I was wondering if I could "rotate" the data between each cell?

Basically, so after a set amount of time I want the data in the first cell to move to the second cell, the second cell data to move to the third cell and the third cell data to move to the first cell and so on...

I'm guessing if it's possible it would require some form of JavaScript?

I'm open to all possible solutions

Here's an example of what I'm trying to achieve:

enter image description here

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>
Was it helpful?

Solution

I would use jQuery to do this as it requires manipulation of the DOM. In addition to this I would separate the styling from the markup.

// 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);
}();

Check it out on JS Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top