How to scroll table row by row at button click jQuery

user_9455275 0
Viewed 300

I have table with fixed heihgt, and scrollable body, i add the button for scroling row one by one.

Ideas is to scroll row by row by user clicking.

For now i create func for scroll down, but it's not good for me, some how i need to create func to scroll table on click one row down.

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

JsFiddle

So i want to scroll on #more-arrows click, row one by one scrolle to the bottom.

css html jquery javascript
2 Answers

You can use jquery's .animate() method to achieve it. Try this

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

You can do this by figuring out the position of the row and then moving to it using scrollTop. Here is a snipped to get you started:

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>

user_115210020
Related