Question

var str = '<tr class="task_row"><td>data.name</td><td>data.description</td></tr>';
$(str)
    .hide()
    .insertAfter($(clicked_item)
                     .parent()
                     .parent()
                     .parent()
                     .next()
                     .find('.header_row')
                 )
    .fadeIn("slow");

For some reason, when jQuery shows the new row, it gives the <tr> a display: block style which makes the entire row only take up one cell. Is there any way to keep it from behaving this way?

Answer 1

I figured it out.

If I add:

$('.task_row').css('display', 'table-row');

after the animation line, it displays properly.