使用上/下箭头键滚动到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>

尽管这是一个简单的示例，但仍将对网站上的按键导航系统进行足够的解释！

祝好运！