javascript - 当突出显示的行是表格主体中可见的最后一行时滚动表格

Question

假设我有一个包含 20 行的表。默认情况下，第一行突出显示，屏幕中有 6 行可见。现在，通过使用向下箭头导航，突出显示的行会到达第 6 行并在屏幕上可见，但是当它到达第 7 行时，它现在会在屏幕上可见。所以我希望当高亮显示到第 6 行时，下一行表格应该在屏幕上可见。

这段代码将帮助您更好地理解我的问题。

$(document).ready(function(){

    var rowCount = $('#partyitem_table >tbody >tr').length;


    var $tbody = $("#partyitem_table tbody").on('click', 'tr', function() {
            highlight($(this));
    });

    function highlight($row) {
        if ($row.length) {
            $tbody.children().removeClass("highlight");
            $row.addClass('highlight');
        }
    }

    var firstrow = $tbody.find('tr').first();
    highlight(firstrow);



    /* Keydown event function to navigate the table row */
    $(document).keydown(function(e){

            switch(e.which){

                /* Up arrow */
                case 38:
                    var $prev = $tbody.find('.highlight').prev();
                    highlight($prev);

                    break;


                /* Down Arrow */
                case 40:
                    var $next = $tbody.find('.highlight').next();
                    highlight($next);

                    break;
            }
            /* End of Switch Case */
    });



});

.fixed_header{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 255px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: #e8e8e8;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

.highlight{
    background-color: #3c8dbc;
    color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="partyitem_table" class="table table-bordered fixed_header">
  <thead>
    <tr>
      <th>Item Name</th>
      <th>Quantity</th>
      <th>Rate</th>
      <th>Date</th>
      <th>By</th>
      <th>Total</th>
      <th>SrNo</th>
      <th>BrandSrNo</th>
    </tr>
  </thead>
  <tbody id="table_body">
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
    <tr>
      <td>Item Name</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Date</td>
      <td>By</td>
      <td>Total</td>
      <td>SrNo</td>
      <td>BrandSrNo</td>
    </tr>
  </tbody>
</table>

如有任何帮助，我们将不胜感激。

Answer 1

是的，我得到了答案。 scrollIntoView() 是用于在给定元素的可见区域滚动的函数。下面是代码。

On Keydown Event

/* Keydown event function to navigate the table row */
    $(document).keydown(function(e){

            switch(e.which){

                /* Up arrow */
                case 38:

                    var $prev = $tbody.find('.highlight').prev();
                    highlight($prev);


                    var table_row = document.getElementById('partyitem_table').rows;
                    var selected_row = $('.highlight').index();
                    table_row[selected_row+=1].scrollIntoView(false);

                    break;


                /* Down Arrow */
                case 40:

                    var $next = $tbody.find('.highlight').next();
                    highlight($next);


                    var table_row = document.getElementById('partyitem_table').rows;
                    var selected_row = $('.highlight').index();
                    table_row[selected_row+=1].scrollIntoView(false);

                    break;
            }
            /* End of Switch Case */
    });