"如何在按钮单击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);
});

提琴手

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

Answer 1

您可以使用 jquery 的.animate()<\/code>方法来实现它。 试试这个

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

Answer 2

您可以通过找出行的位置然后使用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>