Q: Why table tr height return 0 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());



A: 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());
});


