I have a <table> that is set up roughly like this

Name            Description     Notes
===========================================
[___________]   [_________]     [_________]

There are quite a few rows and rather than the users tabbing through rows, I'd like to implement pressing the Up/Down keys to move up and down in the selected column.

The rows have the ID 'row_{ID}' where ID is the database ID. The fields have the ID 'name_{ID}', 'description_{ID}', 'notes_{ID}' etc.

I'm trapping the press with jQuery like:

$('input[id^="name_"]').bind('keyup', function(e) {

    if(e.keyCode == 38)
        ...
    else if(e.keyCode == 40)
        ...
});

Essentially I want, if the user is in row 2 of the description and press up, that they move to row 1 description field, and if they press down they move to row 3 description field.

I can't work out the way to select the next or previous rows. Can anyone provide assistance?

I have a <table> that is set up roughly like this

Name            Description     Notes
===========================================
[___________]   [_________]     [_________]

There are quite a few rows and rather than the users tabbing through rows, I'd like to implement pressing the Up/Down keys to move up and down in the selected column.

The rows have the ID 'row_{ID}' where ID is the database ID. The fields have the ID 'name_{ID}', 'description_{ID}', 'notes_{ID}' etc.

I'm trapping the press with jQuery like:

$('input[id^="name_"]').bind('keyup', function(e) {

    if(e.keyCode == 38)
        ...
    else if(e.keyCode == 40)
        ...
});

Essentially I want, if the user is in row 2 of the description and press up, that they move to row 1 description field, and if they press down they move to row 3 description field.

I can't work out the way to select the next or previous rows. Can anyone provide assistance?

• javascript
• jquery
• html
• dom

• IMO, you should trigger the code on keydown, not keyup. This will continue to trigger the up/down action if they key is held down. Also, consider testing for left/right arrows (37 and 39) as well as up/down arrows -- I might expect left to do the same as up, and right the same as down. – Blazemonger Commented Aug 31, 2011 at 13:44
• That said: please define "select the next or previous rows." Do you want the row to be highlighted? A radio button checked? Both? Neither? – Blazemonger Commented Aug 31, 2011 at 13:48
• @mblase: I expect left/right arrow keys to move my cursor inside the input, not between them. (Of course, at extremes I suppose it could be OK to move between inputs.) Up/down are useless in a single line input, so overriding them is not an issue, as it doesn't alter normal behaviour. – nikc Commented Aug 31, 2011 at 13:52

3 Answers 3

To go down:

$(this).closest('tr').next().find('input[name=' + $(this).attr('name') + ']').focus();

To go up:

$(this).closest('tr').prev().find('input[name=' + $(this).attr('name') + ']').focus();

That is, assuming your inputs are all named the same.

Otherwise, you'll have to change that selector a bit, or use jQuery's .index() on the td and then select with .eq().

Try this

Working demo

$(function(){
    $('input[id^="name_"], input[id^="description_"], input[id^="notes_"]')
    .bind('keyup', function(e) {
        var $this = $(this);
        var $tr = $this.closest("tr");
        var id = this.id.substring(0, this.id.indexOf("_"));

        if(e.keyCode == 38){
            $tr.prev().find('input[id^='+id+']').focus();
        }
        else if(e.keyCode == 40)
        {
           $tr.next().find("input[id^='"+id+"']").focus();
        }
    }); 
});

I'll provide a sample of my own recent code which did almost the exact same thing. Hopefully it will be of some value.

// select events from the table using the keyboard arrows
$(document).keydown(function(e) {
    if (e.keyCode==39 || e.keyCode==40) { // right, down
    // if no radio buttons are checked, select the first one
    if (!$("input:radio[name='rownum']:checked").length)
        $("input:radio[name='rownum']:first").attr("checked",true);
    // otherwise, select the next one
    else
        $("input:radio[name='rownum']:checked").closest("tr").next().find("input").attr("checked",true);
    // highlight the row, un-highlight its siblings, and check its radio button
    $("input:radio[name='rownum']:checked").closest("tr")
        .addClass('selected')
        .siblings().removeClass('selected').end()
        .find('input').attr('checked','checked');
    } else if (e.keyCode==37 || e.keyCode==38) { // left, up
    // if no radio buttons are checked, select the last one
    if (!$("input:radio[name='rownum']:checked").length)
        $("input:radio[name='rownum']:last").attr("checked",true);
    // otherwise, select the previous one
    else 
        $("input:radio[name='rownum']:checked").closest("tr").prev().find("input").attr("checked",true);
    // highlight the row, un-highlight its siblings, and check its radio button
    $("input:radio[name='rownum']:checked").closest("tr")
        .addClass('selected')
        .siblings().removeClass('selected').end()
        .find('input').attr('checked','checked');
    }
}); // end keydown