How to scroll table row by row at button click jQuery-CodePudding

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.

CodePudding user response：

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 >
  <table >
    <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 >
  <svg id="more-arrows">
    <polygon  points="37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3 " />
    <polygon  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  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>

CodePudding user response：

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