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
– Durgesh Chaudhary, Commented May 4, 2014 at 18:13

Bhavik · Accepted Answer · 2014-05-04 18:27:36Z

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 4, 2014 at 18:27

Bhavik

4,9044 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Durgesh Chaudhary · Accepted Answer · 2014-05-04 18:22:40Z

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 4, 2014 at 18:22

Durgesh Chaudhary

1,0772 gold badges12 silver badges32 bronze badges

4 Comments

Rockstart Over a year ago

It says student.Name is undefinded. Any idea?

Durgesh Chaudhary Over a year ago

console.log(student) will reveal if that student really has a Name property

Rockstart Over a year ago

Inside the LoadRow() i am able to get the name. But inside settimeout function , the name is undefined

Durgesh Chaudhary Over a year ago

It is because of scope. Solution and explanation here : stackoverflow.com/questions/2171602/…

josephnvu · Accepted Answer · 2014-05-04 18:50:39Z

0

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);

answered May 4, 2014 at 18:50

josephnvu

1,2521 gold badge9 silver badges14 bronze badges

Comments

jofori89 · Accepted Answer · 2017-06-05 01:46:50Z

0

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);
}

edited Jun 5, 2017 at 1:46

answered Jun 4, 2017 at 13:16

jofori89

11 bronze badge

Collectives™ on Stack Overflow

Adding delay on loading each row in HTML table

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related