動畫表追加陣列

Question

我有一個表格選項卡，它包含thead部分和一個對象數組，其中包含實際爲表格tbody行的元素。

var tab = $("#myTab"); 

var arr = [tr, tr, tr,...] 

<tr> 
    <td>Chris</td> 
    <td>25</td> 
    <td>single</td> 
</tr> 
... 

我追加「時間與循環：

for(var i=0;i<arr.length;i++){ 
    tab.append(arr[i]); 
} 

我想這個動畫，像顯示此逐行慢慢追加。

TNX爲您的代碼

Answer 1

該代碼添加行這是你在尋找什麼：

var tab = $("#myTab"); 
 

 
tr = "<tr> <td>Chris</td> <td>25</td> <td>single</td></tr>" 
 

 
var arr = [tr, tr, tr] 
 
var i = 0; 
 

 
var inter = setInterval(function() { 
 
    if (i < arr.length) { 
 

 
     tab.append(arr[i]); 
 
     tab.find('tr:last-child').hide() //hide the row 
 
     tab.find('tr:last-child').show('slow') //show the row 
 
     i++; 
 
    } else { 
 
     clearInterval(inter) 
 
    } 
 
    }, 1000) //milli-second gap you want to give

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTab" border="1"> 
 

 
</table>

Answer 2

使用間隔

setInterval(function() { 
for(var I=0; I < arr.length; I++) { 
     tab.append(arr[I]); 
}, 10000); 

在10秒的時間間隔

Answer 3

var _container = $("#container"); 
 

 
var _tr = "<tr><td> Chris <br/></td><td> 25 <br/></td><td> Single <br/></td></tr>"; 
 

 
var _arr = [_tr, _tr, _tr, _tr, _tr, _tr, _tr, _tr, _tr, _tr, _tr, _tr, _tr, _tr, _tr]; 
 

 
function addRows() {  
 
    if(_arr.length) {   
 
     _container.append(_arr.pop()); 
 
     _container.find("tr:last").hide(); 
 

 
     
 
     _container.find("tr:last").fadeIn(2400, addRows); 
 
    } 
 
} 
 

 
addRows();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table id="container"> 
 
</table >