Question

I am working with appending datarows. As they are appended, the entire tabe sort of ‘jerks’.

Is there a way to smoothly append a datarow? I have the following: (I also have a fiddle here)

jQuery:

var $trClone;

for (i = 1; i < 7; i++) {
    $trClone = $("#tblTest tr:last").clone();
    $trClone.attr('id', 'DataRow_' + i);
    $("#tblTest tr:last").after($trClone);
}

And the table:

 <table id="tblTest" class="schedule-table" cellspacing="1" border="0" style="width:100%;"> 
    <tablebody>
        <tr>     
            <td class="resource-header"><span class="resource-header-text">Personnel</span></td>     
            <td class="resource-header"><span class="resource-header-text">Office</span></td>     
            <td class="dow"><span class="dow">Tue<br>01</span></td>
            <td class="dow"><span class="dow">Wed<br>02</span></td>
            <td class="dow"><span class="dow">Thu<br>03</span></td>
            <td class="dow"><span class="dow">Fri<br>04</span></td>
            <td class="weekend"><span class="weekend-text">Sat<br>05</span></td>
            <td class="weekend"><span class="weekend-text">Sun<br>06</span></td>
            <td class="dow"><span class="dow">Mon<br>07</span></td>
            <td class="dow"><span class="dow">Thu<br>31</span></td> 
        </tr> 

        <tr class="DataRow" id="DataRow_3"> 
            <td class="resource" style="display:none;"><span class="resource">3</span></td> 
            <td class="resource" id="TD_Name">
                <div style="float:left;">Lname, Fname</div>
                <div style="float:right;">
                    <img id="imgProgress1"  src="http://i193.photobucket.com/albums/z137/Pixel_Pete/microUS.gif" width="16" height="16" alt="Working..." />
                </div>        
            </td> 
            <td class="resource" id="TD_Office"><span>A6OK</span></td> 
            <td class="dow" id="TD_1" >Data1</td> 
            <td class="dow" id="TD_2" >Data2</td> 
            <td class="dow" id="TD_3" >Data3</td> 
            <td class="dow" id="TD_4" >Data4</td> 
            <td class="weekend" id="TD_5" >Data5</td> 
            <td class="weekend" id="TD_6" >Data6</td>  
        </tr>
    </tablebody>
</table>

Thanks in advance for any help.

Answer 1

You could try fading it in. Or slideDown

$trClone.css('display', 'none').
$("#tblTest tr:last").after($trClone);
$trClone.fadeIn('slow'); //or slideDown.