Inserting a row break in dynamically generated table

Question

I have table rendered by Apex code in salesfoce.

<div id="wrap" style=""><fieldset style="border: none;"><table role="presentation" style="">
 <tbody><tr>
    <td>
<input type="radio"value="Casual"><label for="j_id0:j_id2:j_id4:j_id112:0"> CASUAL</label></td>
<td>
<input type="radio" value="BUSINESS CASUAL"><label for="j_id0:j_id2:j_id4:j_id112:1"> BUSINESS CASUAL</label></td>
<td>
<input type="radio" value="Semi-Formal"><label for="j_id0:j_id2:j_id4:j_id112:2"> SEMI-FORMAL</label></td>
<td>
<input type="radio" value="Formal"><label for="j_id0:j_id2:j_id4:j_id112:3"> FORMAL</label></td>
<td>
<input type="radio" value="Costume"><label for="j_id0:j_id2:j_id4:j_id112:4"> COSTUME</label></td>
<td>
<input type="radio" value="Other"><label for="j_id0:j_id2:j_id4:j_id112:5"> OTHER</label></td>
 </tr>
</tbody></table></fieldset>
            </div>

I need to break the row after third label . which means three inputs/labels in one row. I can use jQuery. I have tried everything like injecting closing </tr> tag after third input via innerHTML etc . But nothing seems to work .

Answer 1

Try to manipulate the DOM a little bit,

$('<tr>').append($('tr td:gt(2)')).appendTo('tbody');

DEMO