使用鍵盤滾動表格

我有一個表格中有40行的列表，它們嵌套在顯示18的div中，並使用overflow-x：scroll隱藏其餘的。使用鍵盤滾動表格

我已經創建了一個javascript代碼，允許我選擇一行並使用鍵盤上的'向上'和'向下'箭頭鍵導航行。

兩個問題我想解答是：

我希望在最後的第18行被設置爲活動啓動表的滾動。
如果我在第一條記錄和最後一條記錄上，並且我輸入'up'或'down'，則我放鬆了該行的活動狀態。

這裏是我用來試圖解決問題的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; 
}

來源

2014-01-07 Kyle McBride

要處理問題2，只需在實際移動到另一行之前檢查$(currentRow).next().length或$(currentRow).prev().length是否爲零。

但是，我實際上只是寫一個函數來處理選擇一個新行，然後從事件處理程序中爲點擊和上下鍵調用它。這讓你無法重複代碼來做同樣的事情三次。在這個新功能中，您可以簡單地檢查$(newRow).length。

解決問題2.滾動更困難。

首先，您希望從上下鍵事件返回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); 
}

...此外，你想overflow-y在.table造型，不overflow-x。

我捲起這一切都成你的提琴的修改：http://jsfiddle.net/cJjRH/4/

編輯：你還可以檢查出http://jsfiddle.net/cJjRH/5/了輕微的修改，讓默認瀏覽器滾動收回當你超過第一條記錄或者超過最後一條記錄時超過。當沒有選擇新行時，它從事件處理程序返回true。

來源

2014-01-07 15:53:18 markegli

謝謝你工作完美:)我有點新的JavaScript和jQuery，所以我完全意識到它的能力。 –

使用鍵盤滾動表格

回答

相關問題