javascript - 如何使用上下键更改选择

Question

我为此所做的所有代码都在下面给出，我希望表体滚动并且工作得很好，但是当我使用向下箭头在选择行后滚动时出现问题，它隐藏在表头内如何解决这个问题，请帮助我，谢谢.

<script>
 $("#reservationTable1 tr").click(function(evt) {
        var element = $(evt.target);
        var tableElement = element.parents('table');
        tableElement.find('tr').removeClass('highlighted');
        element.parents('tr').addClass('highlighted');
    });

    $('#reservationTlbBody1').on('keypress', 'tr', function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        var highlightedRow = $("#reservationTable1 .highlighted");
        if (highlightedRow.length > 0) // table cell is selected
        {
            var tbodyElement = highlightedRow.parents('tbody');
            var trElements = tbodyElement.find('tr');
            var nextElement = highlightedRow.next('tr');
            var prevElement = highlightedRow.prev('tr');
            trElements.removeClass("highlighted");
            if (keycode == '9') {
                //alert("hhh");
                if (nextElement.length) {
                    nextElement.addClass('highlighted');
                    var modalId2 = $(this).closest('tr').attr('id');
                    copyData(modalId2);
                } else if (trElements.length) {
                    $(trElements[0]).addClass('highlighted');
                }

            }
            if (keycode == '40') {

                if (nextElement.length) {
                    nextElement.addClass('highlighted');
                    var c_id = highlightedRow.attr('id');
                    copyData(c_id);
                } else if (trElements.length) {
                    $(trElements[0]).addClass('highlighted');
                }

            }
            if (keycode == '38') {
                if (prevElement.length) {
                    prevElement.addClass('highlighted');
                    var c_Previd = highlightedRow.attr('id');
                    copyData(c_Previd);
                } else if (trElements.length) {
                    $(trElements[trElements.length - 1]).addClass('highlighted');
                }
            }
            if (keycode == '13') {

                var c_EntrId = $(this).closest('tr').attr('id');
                copyData(c_EntrId);
            }

        }


    });
</script>

<style> 
        .highlighted{
        background-color: pink;
        }
        section {
        position: relative;
        border: 1px solid #000;
        padding-top: 37px;
        }
        section.positioned {
        position: absolute;
        top:100px;
        left:100px;
        width:800px;
        box-shadow: 0 0 15px #333;
        }
        .container {
        overflow-y: auto;
        height: 200px;
        }
        table {
        border-spacing: 0;
        width:100%;
        }
        td + td {
        border-left:1px solid #eee;
        }
        td, th {
        border-bottom:1px solid #eee;

        padding: 10px 25px;
        }
        th {

        padding-top: 0;
        padding-bottom: 0;
        color: transparent;
        border: none;
        white-space: nowrap;

        }
        th div{
        position: absolute;
        background: transparent;

        color: #000;
        padding: 9px 25px;
        top: 0;
        margin-left: -25px;
        line-height: normal;
        border-left: 1px solid #800;
        }
        th:first-child div{
        border: none;
        }
    </style>

<section class="">
         <div class="container" style="padding:0px;">
            <table id="reservationTable1" tabindex='0'>
               <thead>
                  <tr class="header">
                     <th>
                        Col1
                        <div>Col1</div>
                     </th>
                     <th>
                        Col2
                        <div>Col2</div>
                     </th>
                     <th >
                        Col3
                        <div>Col3</div>
                     </th>                  
                  </tr>
               </thead>
               <tbody id="reservationTlbBody1" style="overflow: auto; height:200px!important;" tabindex='1' >
                  <tr class="clickable-row jsearch-row" tabindex='0'>
                     <td>Alfreds Futterkiste</td>
                     <td>Maria Anders</td>
                     <td>Germany</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='2'>
                     <td>Centro comercial Moctezuma</td>
                     <td>Francisco Chang</td>
                     <td>Mexico</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='3'>
                     <td>Ernst Handel</td>
                     <td>Roland Mendel</td>
                     <td>Austria</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='4'>
                     <td>Island Trading</td>
                     <td>Helen Bennett</td>
                     <td>UK</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='5'>
                     <td>Laughing Bacchus Winecellars</td>
                     <td>Yoshi Tannamuri</td>
                     <td>Canada</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='6'>
                     <td>Magazzini Alimentari Riuniti</td>
                     <td>Giovanni Rovelli</td>
                     <td>Italy</td>
                  </tr>
                   <tr class="clickable-row jsearch-row" tabindex='0'>
                     <td>Alfreds Futterkiste</td>
                     <td>Maria Anders</td>
                     <td>Germany</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='2'>
                     <td>Centro comercial Moctezuma</td>
                     <td>Francisco Chang</td>
                     <td>Mexico</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='3'>
                     <td>Ernst Handel</td>
                     <td>Roland Mendel</td>
                     <td>Austria</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='4'>
                     <td>Island Trading</td>
                     <td>Helen Bennett</td>
                     <td>UK</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='5'>
                     <td>Laughing Bacchus Winecellars</td>
                     <td>Yoshi Tannamuri</td>
                     <td>Canada</td>
                  </tr>
                  <tr class="clickable-row jsearch-row" tabindex='6'>
                     <td>Magazzini Alimentari Riuniti</td>
                     <td>Giovanni Rovelli</td>
                     <td>Italy</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </section>

Answer 1

您所要做的就是从 $("#reservationTlbBody1").on(...) 更改为 $(document).on(...)

然后就可以正常工作了。