I need to wrap up table row into div

Question

I need to wrap up table row into div, I do

$('table tr').each(function(){
    $(this).insertBefore('<div>');
    $(this).insertAfter('</div>');
})

but seems doesn't work UPDATE fidle http://jsfiddle.net/EsdR2/1/

Answer 1

If you are trying to break them into separate section for so than a row, then maybe try the tbody approach.

<table class="table">
    <tbody class="first-part">
        <tr>
            <td>first</td>
        </tr>
    </tbody>
    <tbody class="second-part" style="display:none">
        <tr>
            <td>second</td>
        </tr>
    </tbody>
</table>

Edit after seeing fade out then you can try this javascript..

var firstPart = $('tbody.first-part');
var secondPart = $('tbody.second-part');

$('#SomeButton').click(function () {
    firstPart.fadeOut("fast");
    secondPart.fadeIn("slow");
});

Here a jsFiddle with fadeout working. http://jsfiddle.net/u3fNL/1/