如何在按鈕單擊jQuery時逐行滾動表格

我有固定高度和可滾動主體的表格，我添加了用于逐行滾動的按鈕。

想法是通過用戶點擊逐行滾動。

現在我為向下滾動創建 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，一行一行地滾動到底部。

uj5u.com熱心網友回復：

你可以使用jquery的.animate()方法來實作它。試試這個

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

uj5u.com熱心網友回復：

您可以通過確定行的位置然后使用scrollTop. 這是一個可以幫助您入門的片段：

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

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>

標籤：

上一篇：如何將flexdiv中的元素向右移動？

下一篇：修復瀏覽器不更新css和js檔案的內容