使用上/下箭頭鍵滾動到div焦點

Question

我有這種表結構，其中數百行以固定高度包裹在溢出div中，用戶可以使用向上/向下/向左/向右箭頭鍵在td tag導航div 。

我希望溢出的div在溢出的內容旁邊滾動，同時用戶使用向上/向下箭頭鍵瀏覽表的其余行

這是我的html

<table id="product_table_body" class="js_livetable_products" border="0" cellpadding="0" cellspacing="0">
<tbody>
        <tr>
            <td><div class="product_id cells">#</div></td>
            <td><div class="product_name cells">product name</div></td>
            <td><div class="product_prices product_cost_price cells">cost price</div></td>

        </tr>
        <tr>
            <td><div class="product_id cells">#</div></td>
            <td><div class="product_name cells">product name</div></td>
            <td><div class="product_prices product_cost_price cells">cost price</div></td>

        </tr>
        <tr>
            <td><div class="product_id cells">#</div></td>
            <td><div class="product_name cells">product name</div></td>
            <td><div class="product_prices product_cost_price cells">cost price</div></td>

        </tr>
</tbody>

這是我的問題的jsFiddle ，但是箭頭鍵導航似乎不起作用

Answer 1

您可以簡單地將active類添加到每個tr或td 。

$('body').keydown(function () {
  $('tr').attr('class', 'active');
}

依此類推，繼續將活動類移動到下一個元素：

$(this).next().attr('class', 'active');

http://jsfiddle.net/afzaal_ahmad_zeeshan/L5uJf/

我尚未區分諸如右箭頭或左箭頭之類的keyEvent，您可以根據需要進行選擇！ 而且，您也可以向active類添加更多功能和CSS屬性。

jQuery的：

document.body.onkeydown = function () {
    var active = $('.active');
    $('.start').attr('class', 'active');
        active.next().attr('class', 'active');
        active.attr('class', '');
}

的HTML

<table>
    <tr>
        <td class="start">Something</td>
        <td>Another Thing</td>
    </tr>
</table>

盡管這是一個簡單的示例，但仍將對網站上的按鍵導航系統進行足夠的解釋！

祝好運！