테이블 키보드를 사용하여 스크롤

테이블에 40 개의 행 목록이 있는데, 18 개를 표시하는 div 내에 중첩되어 있으며 overflow-x : scroll을 사용하여 나머지를 숨 깁니다.테이블 키보드를 사용하여 스크롤

나는 행을 선택하고 키보드의 '위'및 '아래'화살표 키를 사용하여 행을 탐색 할 수있는 자바 스크립트 코드를 만들었습니다. 내가 해결하고 싶은

두 가지 문제는 다음과 같습니다

는 내가 처음 18 행의 마지막이 활성으로 설정되어있는 경우 테이블의 스크롤을 시작합니다.
내가 첫 번째 레코드에 있고 마지막 레코드에서 '위로'또는 '아래로'키를 누르면 해당 행의 활성 상태가 느슨합니다.

다음은 jsfiddle입니다. 문제를 해결하기 위해 사용하고 있습니다. http://jsfiddle.net/kmcbride/cJjRH/ 이하가 코드입니다.

HTML :

  <div class="table"> 
      <table> 
       <thead> 
        <tr> 
         <th> <span>End User</span> </th> 
         <th> <span>Reseller</span> </th> 
         <th> <span>Distributor</span> </th> 
         <th> <span>Product Instance</span> </th> 
         <th> <span>Created On</span> </th> 
         <th> <span>Created By</span> </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr class="openPane" id="1"> 
         <td>Melita 1</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="2"> 
         <td>Melita 2</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="3"> 
         <td>Melita 3</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="4"> 
         <td>Melita 4</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="5"> 
         <td>Melita 5</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="6"> 
         <td>Melita 6</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="7"> 
         <td>Melita 7</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="8"> 
         <td>Melita 8</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="9"> 
         <td>Melita 9</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="10"> 
         <td>Melita 10</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="11"> 
         <td>Melita 11</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="12"> 
         <td>Melita 12</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="13"> 
         <td>Melita 13</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="14"> 
         <td>Melita 14</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="15"> 
         <td>Melita 15</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="16"> 
         <td>Melita 16</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="17"> 
         <td>Melita 17</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="18"> 
         <td>Melita 18</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="19"> 
         <td>Melita 19</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="20"> 
         <td>Melita 20</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="21"> 
         <td>Melita 21</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="22"> 
         <td>Melita 22</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="23"> 
         <td>Melita 23</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="24"> 
         <td>Melita 24</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="25"> 
         <td>Melita 25</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="26"> 
         <td>Melita 26</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="27"> 
         <td>Melita 27</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="28"> 
         <td>Melita 28</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="29"> 
         <td>Melita 29</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="30"> 
         <td>Melita 30</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="31"> 
         <td>Melita 31</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="32"> 
         <td>Melita 32</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="33"> 
         <td>Melita 33</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="34"> 
         <td>Melita 34</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="35"> 
         <td>Melita 35</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="36"> 
         <td>Melita 36</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="37"> 
         <td>Melita 37</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="38"> 
         <td>Melita 38</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="39"> 
         <td>Melita 39</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="40"> 
         <td>Melita 40</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
        <tr class="openPane" id="41"> 
         <td>Melita 41</td> 
         <td></td> 
         <td></td> 
         <td>WiSe00004</td> 
         <td>Enabled</td> 
         <td>7/11/2013 12:56:00PM</td> 
        </tr> 
       </tbody> 
      </table> 
      <div class="load-more-btn">Load More</div> 
     </div>

JS :

$(".openPane").click(function() { 
    if ($(".pane").hasClass('pane-open')) { 
     $(".openPane").removeClass('rowActive'); 
     $(this).addClass('rowActive'); 
    }else{ 
     $(".pane").slideToggle(250).addClass('pane-open'); 
     $(".openPane").removeClass('rowActive'); 
     $(this).addClass('rowActive'); 
    }; 
}); 

$(document).keydown(function (e) { 

    var currentRow = $(".rowActive").get(0); 

    switch(event.keyCode) 
    { 
      //arrow down 
     case 40: 
      $(currentRow).next().addClass("rowActive"); 
      $(currentRow).removeClass("rowActive"); 
      break; 
      //arrow up 
     case 38: 
      $(currentRow).prev().addClass("rowActive"); 
      $(currentRow).removeClass("rowActive"); 
      break; 
      //esc 
     case 27: 
      if ($(".pane").hasClass('pane-open') && !$(".pane").hasClass('pane-pinned')){ 
       $(".pane").slideToggle(250).removeClass('pane-open'); 
      }; 
      break;  
    } 

});

CSS :

.table { 
    width: 100%; 
    height: 400px; 
    overflow-x: scroll; 
} 
.table table { 
    width: 100%; 
} 
.table table th { 
    text-align: left; 
} 
.rowActive { 
    background-color: #EDF4F9!important; 
}

01 여기

내 코드입니다 23,516,

출처

2014-01-07 Kyle McBride

당신은 당신이 실제로 다른 행으로 이동하기 전에 $(currentRow).next().length 또는 $(currentRow).prev().length가 0이 아닌 것을 확인해야 문제 2를 처리합니다.

그러나 실제로는 새 행을 선택하고 클릭 및 위아래 키 이벤트 처리기에서 호출하는 단일 함수를 작성합니다. 따라서 동일한 작업을 세 번 반복하는 것을 방지 할 수 있습니다. 이 새로운 기능을 이용하면 간단하게 $(newRow).length을 확인할 수 있습니다.

그러면 문제가 해결됩니다. 스크롤링이 좀 더 어렵습니다.

먼저,이 키는 원인이 있음을 스크롤 기본을 무시하는 당신부터 키 이벤트 아래 false를 반환하고자합니다.

그런 다음 브라우저에서 location.hash = '#' + $(newRow).attr('id');을 사용하여 자동으로 행을 스크롤하도록 설정할 수 있지만 원하는 행이 맨 아래에 올 때까지 기다리지 않고 표의 맨 위에 놓습니다.

원하는대로 스크롤 동작을 얻으려면 position: relative;을 테이블 스타일에 추가해야합니다. $(currentRow).position() 함수를 사용하여 행이 테이블과 관련된 위치를 찾으십시오. 그런 다음 어떤 수학을 $('.table').scrollTop()으로 보내서 거기로 스크롤하십시오.

var rowTop = newRow.position().top; 
var rowBottom = rowTop + newRow.height(); 
var $table = $('.table'); // store instead of calling twice 
var tableHeight = $table.height(); 
var currentScroll = $table.scrollTop(); 

if (rowTop < 0) // row is above our current viewing area 
{ 
    // scroll up 
    $('.table').scrollTop(currentScroll + rowTop); 
} 
else if (rowBottom > tableHeight) // row is below our current viewing area 
{ 
    // scroll down 
    var scrollAmount = rowBottom - tableHeight; 
    $('.table').scrollTop(currentScroll + scrollAmount); 
}

는 ... 또한, 당신은 당신의 .table 스타일링 overflow-y하지 overflow-x합니다.

나는 당신의 바이올린의 수정에 모든이 겹쳐서했습니다 당신은 또한 기본 브라우저 스크롤이 다시 걸릴 수있는 약간의 수정을 위해 http://jsfiddle.net/cJjRH/5/을 확인할 수 있습니다 : http://jsfiddle.net/cJjRH/4/

편집 첫 번째 레코드를 지나가거나 마지막 레코드를 끝낼 때까지 끝납니다. 새 행을 선택하지 않으면 이벤트 핸들러에서 true를 반환합니다.

출처

2014-01-07 15:53:18 markegli

감사합니다. 완벽하게 작동했습니다. 저는 자바 스크립트 및 jQuery에 조금 익숙해 져서 메신저 기능을 완전히 알고 있습니다. –

테이블 키보드를 사용하여 스크롤

답변

관련 문제