Question

我有这个表结构，数百行包裹在一个固定高度的溢出div中用户可以使用向上/向下/向左/向右箭头键在div中导航td tag。

我希望溢出的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/

我还没有区分右箭头或左箭头等关键事件，你可以根据自己的需求进行分类！此外，您还可以向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>

虽然这是一个简单的例子，但它仍然可以解释网站上的关键导航系统！

祝你好运！

使用向上/向下箭头键滚动到具有焦点的div

1 个答案: