2011-03-18 16 views
0

我正在處理追加數據行。當他們被追加時,整個Tabe種類的'混蛋'。jQuery如何'順利'添加數據表到表

有沒有辦法順利附加數據行?我有以下幾點:(I also have a fiddle here

jQuery: 

變量$ 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> 

預先感謝任何幫助。

+0

......從未見過的標籤......我見過壽。這是新的嗎? – 2011-03-18 18:06:50

回答

0

你可以嘗試在它的衰落,或者了slideDown

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

@JohnP感謝您的意見。我確實在小提琴頁上嘗試了你的代碼,但它似乎不工作。我喜歡這個主意。 – Bengal 2011-03-18 17:18:16

+0

@bengal,我認爲這是關於循環速度和動畫淡入淡出的問題。我用小提琴撥弄了一下,並得到它的工作:http://jsfiddle.net/aXkWj/8/ – JohnP 2011-03-18 17:36:59

+0

@JohnP,再次感謝您的反饋和時間。我真的很感激。我檢查了你的小提琴,但它似乎與原來的速度相同。 – Bengal 2011-03-18 17:43:42