変更の選択のために上下のキーを使用する方法

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

あなたがしなければならないのは、それがうまく動作します$(document).on(...)

に$("#reservationTlbBody1").on(...)から変更することです。