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