выделите div с фокусом с помощью клавиш со стрелками вверх / вниз

Question

выделите div с фокусом с помощью клавиш со стрелками вверх / вниз

0

У меня есть эта структура таблицы с сотнями строк, завернутая в 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 на мой вопрос, но навигация со стрелками, похоже, не работает

user1862764 15 дек. 2013, в 20:21

Источник

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Afzaal Ahmad Zeeshan · Answer 1 · 2013-12-15T15-53-00.000Z

Вы можете просто добавить active класс к каждому из tr или td.

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

И так далее, продолжайте перемещать активный класс к следующему элементу с помощью этого:

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

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

Я еще не выделил ключевых элементов, таких как стрелка вправо или стрелка влево, вы можете это по своему требованию! Кроме того, вы можете добавить дополнительные функции и свойства CSS в active класс.

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>

Хотя это простой пример, но все же он достаточно подробно объяснит ключевую навигационную систему на веб-сайтах!

Удачи!

спасибо за ваш быстрый ответ .. у меня есть все это на месте здесь в jsFiddle jsfiddle.net/XSeVd, пожалуйста, посмотрите