Modifying the structure of a HTML table with jQuery

Question

I have a list of elements (the X in the following examples) displayed either in a row or in a column of an HTML table.

In HTML code point of view, I have either (horizontal display):

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    ...
  </tr>
</table>

or (vertical display):

<table id="myTable">
  <tr>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
  ...
</table>

This HTML code is generated by a JSF component (called <h:selectManyCheckboxes/>), and thus, I have no control on this HTML code.

However, I want to display my list of elements in 2 columns. In others words, the HTML code of my table will be something like that:

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
  ...
</table>

How can I do that using jQuery?

Thanks in advance for your help.

ps: If you need to know, the X are in fact an input and a label, i.e.:

<td><input .../><label .../></td>

Answer 1

Given the additional information you've provided, I think that this is what you want. It traverses the table moving the cells from every second row into the previous row...

var idx = 1;
var row, next;
while((row = $('#myTable tr:nth-child(' + idx++ + ')')).length) {
    if((next = $('#myTable tr:nth-child(' + idx + ')')).length) {
        row.append(next.find('td'));
        next.remove();
    }
}