Skip to content Skip to sidebar Skip to footer

On Enter Key Move To Next Cell Down In A Table

I am trying to create a form where, if you press enter key on the serial column, the cell below becomes selected. Can someone please solve the correct jquery formula for this task?

Solution 1:

Assuming you want to move to the cell below when hitting enter in any input, use this:

$('table input').keypress(function(e) {
    if (e.keyCode == 13) {
        var $this = $(this),
            index = $this.closest('td').index();

        $this.closest('tr').next().find('td').eq(index).find('input').focus();
        e.preventDefault();
    }
});

Here's your fiddle: http://jsfiddle.net/tYFcH/13/

Solution 2:

$('.serial').keypress(function(e) {
    console.log(this);
    if (e.which == 13) {
        $(this).closest('tr').next().find('input.serial').focus();
        e.preventDefault();
    }
});

http://jsfiddle.net/tYFcH/6/

Solution 3:

The next-in-dom plugin was written for this purpose. Disclaimer: I wrote it

http://techfoobar.com/jquery-next-in-dom/

$('.serial').keypress(function(e) {
    if (e.which == 13) {
        $(this).nextInDOM('.serial').focus();
    }
});

Post a Comment for "On Enter Key Move To Next Cell Down In A Table"