我有一个表格选项卡,其中包含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
答案 0 :(得分:3)
这就是你要找的东西:
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;
答案 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 >