使用JavaScript更改表结构

Question

I am trying to switch a table structure from

<table>
<tr>
   <td><div id=1"></div>
   </td>
   <td><div id=2"></div>
  </td>
</tr>
</table>

to

 <table>
    <tr>
       <td><div id=1"></div>
       </td>
    </tr>
    <tr>
       <td><div id=2"></div>
      </td>
    </tr>
   </table>

and back to the original structure using JavaScript, would appreciate your suggestions.

Answer 1

I strongly suggest you remove the table and simply float the divs as described here

CSS Floats 101

div { 
  float: left;
}

I also suggest you do not use numeric IDs which is allowed in HTML5 but not very compatible and makes JavaScript accessing it potentially confusing

Answer 2

More efficient will be to use method appendTo

// append new line first
$('table').append('<tr></tr>');

// move td to the new tr
$('table tr td').last().appendTo($('table tr').last());