Adding delay on loading each row in HTML table

Question

I am loading data of HTML table dynamically from Jquery.

$(document).ready(function () {

    for (var i = 0; i < StudentsList.length; i++) {
        LoadRow(StudentsList[i]);
    }

});
function LoadRow(student) {
        setTimeout(function (student) {
         $("#tbl tbody").append("<tr class='trStyleSummary'><td>" + student.Name + "</td></tr>");
         }, 1000);
}

I want the table to load rows one by one with delay.

How do I do that? I tried SetTimeout with 1sec, But for some reason, its not working. The table is loading entirely after 1 second.

how are you calling LoadRow, is there only one row. Share a bit more code ;) — Durgesh Chaudhary, May 04 '14 at 18:13

score 3 · Answer 1 · answered May 04 '14 at 18:27

3

Working Fiddle

jQuery

$("tbody tr").each(function () {
   $(this).fadeIn($(this).index() * offset);
});

Link to the result

Hope this is what you are looking for...!!

answered May 04 '14 at 18:27

Bhavik

4,836
3
30
45

score 1 · Accepted Answer · answered May 04 '14 at 18:22

1

Your code is not working because append is getting called at n:1000 for each row. Try following code, it will solve your problem, but it certainly is not a best approach.

$(document).ready(function () {

    for (var i = 0; i < StudentsList.length; i++) {
        LoadRow(StudentsList[i],i);
    }

});
function LoadRow(student,n) {
        setTimeout(function (student) {
         $("#tbl tbody").append("<tr class='trStyleSummary'><td>" + student.Name + "</td></tr>");
         }, 1000*n);
}

answered May 04 '14 at 18:22

Durgesh Chaudhary

1,075
2
12
31

It says student.Name is undefinded. Any idea? – Rockstart May 04 '14 at 18:36
console.log(student) will reveal if that student really has a Name property – Durgesh Chaudhary May 04 '14 at 18:37
Inside the LoadRow() i am able to get the name. But inside settimeout function , the name is undefined – Rockstart May 04 '14 at 18:41
It is because of scope. Solution and explanation here : http://stackoverflow.com/questions/2171602/settimeout-and-anonymous-function-problem – Durgesh Chaudhary May 04 '14 at 18:48

score 0 · Answer 3 · answered May 04 '14 at 18:50

SetTimeout just runs things once. What you want is SetInterval so it runs like a clock. This is how I would solve it:

// From your example before
function LoadRow(student) {
  $("#tbl tbody").append("<tr class='trStyleSummary'><td>" + student.Name + "</td></tr>");
}    

// Say for example you have these as your students: 
var students = [{ Name: 'joe' }, { Name: 'matt' }, { Name: 'sherry' }];

// The index of the last student
var l = students.length;

// Start a Count index
var i = 0;

// START!
var t = setInterval(function(){

  // Load one
  LoadRow( students[i] );

  // Increment up
  i++;

  // Check if all is done, if so stop and clear out
  if (i == l) clearInterval(t);

}, 1000);

jofori89 · Answer 4 · 2017-06-05T01:46:50.863

Should try this way

$(document).ready(function () {
    LoadRow(StudentsList);        
});

function LoadRow(list) {
    if(list != undefined || list.length < 1) {
        // done
        // do something else
        return;
    }

    // Get first item
    const student = list.shift();

    $("#tbl tbody").append(`<tr class='trStyleSummary'>td>${student.Name}</td></tr>`);
    setTimeout(function (student) {
        // Recall the function after 0.15 second
        LoadRow(list);
     }, 150);
}

Adding delay on loading each row in HTML table

4 Answers4

Linked