Javascript: Transfer Elements td's to td's

Question

I know my title is quite confusing but let me explain.

Basically I want to manipulate a table to add and insert tr's and td's anytime because that is what I decided to do for my layout.It's like this:

On the first wave, let's say window = 1, the layout should simply shows one window:

     []
     <tr>
              <td>
              </td>
     </tr>

Second wave, window = 2:

     [] []
     <tr>
              <td>
              </td>
              <td>
              </td>
     </tr>

Third wave, windows = 3:

     []
     []
     []
     <tr>
              <td>
              </td>
     <tr>
              <td>
              </td>
     </tr>
     <tr>
              <td>
              </td>
     </tr>

fourth wave, windows = 4:

     [] []
     [] []

     <tr>
              <td>
              </td>
              <td>
              </td>
     </tr>
     <tr>
              <td>
              </td>
              <td>
              </td>
     </tr>

Those brackets would be like a div inside a td. It does not matter on what is inside the div for as long as those windows are formatted that way.

I already got till second wave, but unable to proceed at window3. What I got is li

     []
     [] []

     <tr>
              <td><div></td>
     </tr>
     <tr>
              <td><div></td>
              <td><div></td>
     </tr>

Which is not suppose to be. How do I do it like the expected result as stated before in javascript? there will be like a trigger it to transform each wave. Any ideas? kindly help. Thanks

Answer 1

Use divs instead of tables. Start with a single container div that will hold all the others.

<div class="container">
</div>

On each iteration, add a child and change the class of the container to reflect having an odd or even number of children.

first:

<div class="container odd">
    <div></div>
</div>

second:

<div class="container even">
    <div></div>
    <div></div>
</div>

third:

<div class="container odd">
    <div></div>
    <div></div>
    <div></div>
</div>

and so on.

Then just write some css to put .odd in one column and .even in two.