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

然后它会正常工作。

如何使用向上和向下键进行更改选择

1 个答案: