Reputation: 7628
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
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
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