如何使用向上和向下鍵更改選擇

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(...)

然後，它會工作得很好。