jQuery 如何“顺利地”将数据行添加到表中

Question

我正在处理附加数据行。当它们被附加时，整个表有点“抽搐”。

有没有办法顺利追加数据行？我有以下内容：(我这里也有一个小提琴)

jQuery:

var $trClone;

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

表格：

 <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>

提前感谢您的帮助。

Answer 1

你可以尝试淡入。或者向下滑动

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