Question

我有一张这样的表，

   <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>

问题

- 如何使用data-id

选择tr

- 如何滚动到tr 1000

也许正在使用这个？

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

- 浏览器滚动已停用，因此我需要使用div（“no-body”）更改此('html,body')，我该怎么做？

Answer 1

使用attribute equals selector获取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>

Answer 2

尝试类似的东西：

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

使用'this'指向触发事件的元素。

如何滚动到表格行

2 个答案: