如何在按钮单击jQuery时逐行滚动表格

Question

我有固定高度和可滚动主体的表格，我添加了用于逐行滚动的按钮。

想法是通过用户点击逐行滚动。

现在我为向下滚动创建 func，但这对我不利，我需要如何创建 func 以在单击一行向下滚动表时。

$('#more-arrows').click(function () {
    var scrollBottom = Math.max($('.table-udt').height() - $('tbody').height() / 200 + 1000, 0);
    $('tbody').scrollTop(scrollBottom).animate({
        scrollBottom: 0
    }, 1000);
});

JsFiddle

所以我想滚动 #more-arrows 点击，一行一行地滚动到底部。

Answer 1

您可以通过找出行的位置然后使用scrollTop 移动到它来做到这一点。这是一个让您入门的片段：

let i = 0
$('#more-arrows').click(function(e) {
  if (i < $(`.scrollTable tr`).length) {
    let position = $(`.scrollTable tr:eq(${i})`).offset().top;
    $('.scroll').animate({
      scrollTop: $('.scroll').scrollTop() + position
    }, 300);
    i++
  } else {
    i = 0
  }
});

table {
    margin: 0 1rem;
    background: #fff;
    width: 98%;
    border-spacing: 0 5px;
    border-collapse: separate;
    border-radius: .25rem;
}

thead tr:first-child {
    background: #E84C3D;
    color: #fff;
    border: none;
}

th:first-child,
td:first-child {
    padding: 0 15px 0 20px;
}


tr {
    width: 100%;
    height: 40px;
}

th {
    font-size: 20px;
    border-collapse: separate;
    border-spacing: 5em;
    font-weight: 500;
}

thead tr:last-child th {
    border-bottom: 3px solid #ddd;
}

tbody tr:hover {
    background-color: #f2f2f2;
    cursor: default;
}

tbody tr:last-child td {
    border: none;
}

tbody td {
    border-bottom: 1px solid #ddd;
}

td:last-child {
    text-align: right;
    padding-right: 10px;
}

.scroll {
  max-height: 360px;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll">
  <table class="scrollTable">
    <tr>
      <td>Text1 Text</td>
      <td>Text1 Text</td>
      <td>Text1 Text</td>
      <td>Text1 Text</td>
    </tr>
    <tr>
      <td>Text2 Text</td>
      <td>Text2 Text</td>
      <td>Text2 Text</td>
      <td>Text2 Text</td>
    </tr>
    <tr>
      <td>Text3 Text</td>
      <td>Text3 Text</td>
      <td>Text3 Text</td>
      <td>Text3 Text</td>
    </tr>
    <tr>
      <td>Text4 Text</td>
      <td>Text4 Text</td>
      <td>Text4 Text</td>
      <td>Text4 Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>More Text</td>
      <td>More Text</td>
      <td>More Text</td>
      <td>More Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>More Text</td>
      <td>More Text</td>
      <td>More Text</td>
      <td>More Text</td>
    </tr>
    <tr>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
      <td>Text Text</td>
    </tr>
    <tr>
      <td>Even More Text Text</td>
      <td>Even More Text Text</td>
      <td>Even More Text Text</td>
      <td>Even More Text Text</td>
    </tr>
  </table>
</div>

<div class="down-row">
  <svg id="more-arrows">
    <polygon class="arrow-top" points="37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3 " />
    <polygon class="arrow-middle" points="37.6,45.8 0.8,18.7 4.4,16.4 37.6,41.2 71.2,16.4 74.5,18.7 " />
    <polygon class="arrow-bottom" points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 " />
  </svg>
</div>

Answer 2

你可以使用jquery的.animate()方法来实现它。试试这个

$('#more-arrows').on('click', function(){
    $('.scroll').stop().animate({
        scrollTop: '+=40px' // 40px can be the height of a row
    }, 200);
});