如何在tablesorter html表中添加键导航

时间:2015-06-25 23:31:59

标签: tablesorter

有没有办法在固定高度的iframe或div中的tablesorter表中实现键盘导航(向上,向下箭头)?

提前致谢。

1 个答案:

答案 0 :(得分:0)

此代码添加了非常基本的功能。添加tabindex属性可使行变为可聚焦(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();
            }
        }   
    });
});