Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to scroll table to particular tr programmatically

I want to scroll the html table to particular tr by using Javascript or jquery. Currently I can get the offset of the selected tr .And I am using the scrollTop method .I have tried the following but it is not working for me :

var table  = document.getElementById("table");
var tr = table.getElementsByTagName("tr")[3];
var scrollTo = tr.offsetTop;
table.scrollTop = scrollTo;

also I tried with jquery :

$('#table').animate({scrollTop:0},50);

can anybody help me where am I getting wrong ?

like image 822
V-Xtreme Avatar asked Apr 04 '14 06:04

V-Xtreme


People also ask

How do I scroll to a specific row in a table?

The row can be programmatically scrolled to view. In conclusion, using a row's offset and dividing the table's outer container by half, we can scroll the table to a particular row.

How do I scroll down to a specific element in JavaScript?

The scrollTo method: The scrollTo() is used to scroll to the specified element in the browser.

How do I scroll to a specific position in HTML?

window. scrollTo( value-x, value-y ); Here value-x is the pixel value of the width, where you wanna jump or scroll to. value-y is for the height of the window in terms of the pixel where you wanna jump or scroll to.


2 Answers

This worked for me, try this

var elm = document.getElementById(id);
elm.scrollIntoView(true);
like image 152
Prashanth vunnam gcs Avatar answered Sep 22 '22 05:09

Prashanth vunnam gcs


try this : http://jsfiddle.net/SZKJh/

var w = $(window);
var row = $('#tableid').find('tr').eq( line );

if (row.length){
    w.scrollTop( row.offset().top - (w.height()/2) );
}

reference :

https://stackoverflow.com/a/7853216/1982680

like image 29
Dipali Vasani Avatar answered Sep 24 '22 05:09

Dipali Vasani