[stackoverflow] group table rows

3950385/combining-rows-in-javascript

HTML

<table id="outterTable">
    <tbody>
        <tr> 
            <td colspan="3">
                <p>(Row 1) This Says Something</p>
            </td>
        </tr>
        <tr>
            <td> (Row 1a)
                <select option/>
            </td>
        </tr>
        <tr> 
            <td colspan="3">
                <p>(Row 2) This Says Something</p>
            </td>
        </tr>
        <tr>
            <td> (Row 2a)
                <select option/>
            </td>
        </tr>
        <tr>
            <td colspan="3"> 
                <p>(Row 3) This Says Something</p>
            </td>
        </tr>
        <tr>
            <td> (Row 3a)
                <select option/>
            </td>
        </tr>
    </tbody>
</table>

CSS

/* only rows which are direct children of the outter table*/
#outterTable > tbody > tr{
    border:1px solid black;
}

JavaScript

//setup some click actions just to prove that they remain attached even after moving
$('#outterTable tr').click(function() {
    alert('You clicked on row: ' + $(this).text());
});

//update the table
$('#outterTable tr:even').each(function() {
    var $tr1 = $(this),
        $tr2 = $tr1.next('tr'),
        $t = $('<table></table>');
    $('<tr></tr>').append($t).insertBefore($tr1);
    //click actions will remain attached
    //if that is not required, than use $tr1.remove()
    $t.append($tr1).append($tr2);
});