Why table tr height return 0

Question

After I add element tr to table. I want to scroll to that tr. So I need to get height of tr, but it always return 0. Please help me.

My code is below:

$('#desk_customerlister table tbody tr.selected').removeClass('selected');
$('#desk_customerlister table tbody').append("<tr class='selected'><th></th><td class='invisible-cell' id='IsDeleted'>false</td><td class='invisible-cell' id='IsEdited'>false</td><td class='invisible-cell' id='Id'>" + obj.Id + "</td><td id='Code'>" + row.Code + "</td><td id='Name'>" + row.Name + "</td><td id='Address'>" + row.Address + "</td><td id='Contact'>" + row.Contact + "</td><td id='Phone'>" + row.Phone + "</td><td id='Email'>" + row.Email + "</td><td class='invisible-cell' id='CreatedAt'>" + obj.ModifiedAt + "</td><td class='invisible-cell' id='CreatedBy'>" + row.UserName + "</td><td class='invisible-cell' id='ModifiedAt'>" + obj.ModifiedAt + "</td><td class='invisible-cell' id='ModifiedBy'>" + row.UserName + "</td></tr>");

var lastrow = $('#desk_customerlister table tbody tr.selected:first');

console.log('Height = ' + lastrow.height());

$('#desk_customerlister').scrollTop((lastrow.index() + 1) * lastrow.height() - $('#desk_customerlister').height() + $('#desk_customerlister thead').height());

does this solve your issue ? https://stackoverflow.com/questions/24669815/jquery-to-get-the-height-of-withing-the-table-cell — Amit Sharma, Jan 15 '20 at 03:51
Have a look at an answer where scroll is moving to specific element. https://stackoverflow.com/questions/6677035/jquery-scroll-to-element#6677069 Now in this question, your scroll should move to last row of a table which is added just now. You can get last row using $('#desk_customerlister table tbody tr:last'); if you like it. Instead of doing removing "selected" class from existing row & adding it to newly added row each time. — Prasad Wargad, Jan 15 '20 at 05:24

score 0 · Answer 1 · answered Jan 15 '20 at 09:08

I have found the answer that you can do after html ready:

$('#desk_customerlister table tbody tr.selected').removeClass('selected');
$('#desk_customerlister table tbody').append("<tr class='selected'><th></th><td class='invisible-cell' id='IsDeleted'>false</td><td class='invisible-cell' id='IsEdited'>false</td><td class='invisible-cell' id='Id'>" + obj.Id + "</td><td id='Code'>" + row.Code + "</td><td id='Name'>" + row.Name + "</td><td id='Address'>" + row.Address + "</td><td id='Contact'>" + row.Contact + "</td><td id='Phone'>" + row.Phone + "</td><td id='Email'>" + row.Email + "</td><td class='invisible-cell' id='CreatedAt'>" + obj.ModifiedAt + "</td><td class='invisible-cell' id='CreatedBy'>" + row.UserName + "</td><td class='invisible-cell' id='ModifiedAt'>" + obj.ModifiedAt + "</td><td class='invisible-cell' id='ModifiedBy'>" + row.UserName + "</td></tr>");

var lastrow = $('#desk_customerlister table tbody tr.selected:first');

$(function() {
 console.log('Height = ' + lastrow.height());
 $('#desk_customerlister').scrollTop((lastrow.index() + 1) * lastrow.height() - $('#desk_customerlister').height() + $('#desk_customerlister thead').height());
});

Why table tr height return 0

1 Answers1