Animate表附加数组

时间:2015-07-03 14:08:12

标签: javascript jquery

我有一个表格选项卡,其中包含thead部分和一个对象Array,其中的元素实际上是table tbody行。

var tab = $("#myTab");

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

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

我使用for循环附加&#39;

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

我想为此设置动画,就像逐行显示这一行。

TNX

3 个答案:

答案 0 :(得分:3)

这就是你要找的东西:

&#13;
&#13;
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
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTab" border="1">

</table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

使用代码间隔

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

此代码以10秒的间隔附加行

答案 2 :(得分:1)

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 >