0

Following is my basic html code of a table in my project.

<table>
    <tr id='someId'>
        <td><input type='checkbox'></td>
        <td>data 1</td>
        <td>data 2</td>
    </tr>
</table>

In this table I have multiple rows nearly 100's of them and the height of the div that contains this table is small so there is a scrollbar to this div.

Some of the checkbox is selected by default and is done in jquery and works fine.

The problem is I want to display the last check box that is checked in that scrollbar as if it is at the bottom of the table then it gets hidden in that scrollbar. hence i want to scroll down where the last check box is checked so that it gets displayed directly in jquery.

please help ..

Sajad Karuthedath
  • 14,987
  • 4
  • 32
  • 49
Saurabh
  • 1,007
  • 2
  • 10
  • 24

2 Answers2

0

Here is a draft version of how to write it.

$(document).ready(function() {
    var scrollTo = $('input:checked').last().offset().top;
    $('#idOfDivToScroll').scrollTop(scrollTo);
});

Some good reading related to the topic:

http://api.jquery.com/checked-selector/

http://api.jquery.com/scrollTop/

Streamside
  • 332
  • 1
  • 8
-1
$(document).ready(function () {
    var rowpos = $('#table input:checked').last().position();
    $('#container').scrollTop(rowpos.top);
});

Should focus on the last element of the table

EDIT: Check out this Fiddle Demo

Aks
  • 1,567
  • 13
  • 23
  • Check out the fiddle , now it will focus on the last checked input – Aks Jan 03 '14 at 10:17
  • position() does only work when the page is scrolled to the top. – Streamside Jan 03 '14 at 10:22
  • You can also use offset() in place of position(). Above code will work – Aks Jan 03 '14 at 10:25
  • @Streamside check this out http://stackoverflow.com/questions/3202008/jquery-difference-between-position-and-offset It is good to use offset, but postion will also work. – Aks Jan 03 '14 at 10:29