scroll to div with focus using up/down arrow keys

Question

I have this table structure with hundreds of rows wrapped in a overflow div with a fixed height user will be able to navigate div in td tag using the arrow keys either up/down/left/right.

i'll want the overflown div to scroll alongside the overflown contents while users use up/down arrow keys to navigate the rest of the table rows

here's my 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>

here's a jsFiddle to my question but arrow keys navigation seems not to work

Answer 1

You can simply add the active class to each of the tr or td .

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

And so on, keep moving the active class to the next element with this:

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

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

I have not yet distinguished the keyEvents such as right arrow or left arrow, you can those on your demand! And also, you can add more features and CSS properties to the active class too.

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>

Although it is a simple example, but still it will explain enough about the key navigation system on the websites!

Good luck!