Question

我有一个表格选项卡，其中包含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

Answer 1

这就是你要找的东西：

＆＃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;

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 >

Animate表附加数组

3 个答案: