Clever Geek Handbook

Animating a table add rows from an array

I have a table tab that consists of a thead part and an array of objects with elements that are actually rows of the tbody table.

var tab = $("#myTab");

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

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

I add these for the loop:

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

I would like to spice it up, something that looks like it is slowly displaying this line by line.

Tpx

+3


source to share


3 answers


This is what you are looking for:



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>
Run codeHide result


+3


source


Usage interval for your code

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


This code adds a line every 10 seconds

+1


source 


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 >
Run codeHide result


+1


source






More articles:


All Articles