CODEWITHSUNDEEP
jquery
Mathematics
Mathematics

Reputation: 7628

how to scroll to a table row

I have a table like this,

   <div id="no-body">
    <table width="301">
          <tbody>
            <tr data-id="1"></tr>
            <tr data-id="2"></tr>
            <tr data-id="3"></tr> // so on
            <tr data-id="1000"></tr>
           </tbody>
    </table>
</div>

Question

- How can I select tr using data-id

- How can I scroll to a tr 1000

maybe using this ?

 $('html,body').animate({
            scrollTop: $("#" + id).offset().top
        },
       'slow');

- Browser scroll is disabled, so I need to change this ('html,body') with div ("no-body"), how can i do this ?

Upvotes: 2

Views: 3270

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115282

Use attribute equals selector to get the tr.

$('html, body').animate({
    scrollTop: $('tr[data-id="1000"]').offset().top
},'slow');


$('html, body').animate({
  scrollTop: $('tr[data-id="1000"]').position().top+'px'
}, 'slow');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="no-body">
  <table width="301">
    <tbody>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1"><td>1</td></tr>
      <tr data-id="2"><td>1</td></tr>
      <tr data-id="3"><td>1</td></tr>
      <tr data-id="1000"><td>1000</td></tr>
    </tbody>
  </table>
</div>

Upvotes: 2

jschavey
jschavey

Reputation: 412

Try something similar:

$( document ).ready(function() {  // wait for document to be fully loaded
    $( "tr" ).click(function( event ) {  // when any tr is clicked, pass the event
        $('html, body').animate({
        scrollTop: $( this ).offset().top
    }, 200);
    });
});

Using 'this' points to the element that triggered the event.

Upvotes: 0

Related Questions