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活动

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

突出显示的行时的滚动表是表体中可见的最后一行

1 个答案: