How to add Key navigation in tablesorter html table

Question

Is there a way to implement keyboard navigation (up, down arrows) in a tablesorter table within a fixed height iframe or div?

Thanks in advance.

Answer 1

This code adds very basic functionality. Adding a tabindex attribute allows the rows to become focusable (demo):

$(function () {
    $('table').tablesorter({
        theme : 'blue',
        widgets : ['stickyHeaders', 'zebra'],
        widgetOptions : {
            stickyHeaders_attachTo : '.wrapper'
        }
    });
    // make tr focusable
    $('table tbody tr').attr('tabindex', 0);
    // make arrows keys change row focus
    $('body').on('keydown', function(e){
        var $tr = $(':focus');
        // only alter arrow key default movements when a row is focused
        if ( $tr.length && $tr[0].nodeName === 'TR' ) {
            if (e.which === 40) {
                // prevent arrow causing a scroll
                // arrow scrolls 1.5 lines, so it doesn't sync up
                e.preventDefault();
                $tr.next().focus();
            } else if (e.which === 38) {
                e.preventDefault();
                $tr.prev().focus();
            }
        }   
    });
});