CODEWITHSUNDEEP
jqueryjquery-selectors
Haymak3r
Haymak3r

Reputation: 1411

Using jQuery to Tab to next cell in a table

I am trying to use jQuery to tab to the next cell in a table unsuccessfully and believe this to be due to errors in my selectors. Using developer tools I see that my cells are a span, within a td .EditText, within a <tr>. Here is the code I'm trying to use. 

$(function() {
    $('.EditText :text').live("keydown", function(e) {
        if (e.which == 9) { //tab Key                                   
            $(this).blur();
            $(this).parent('tr').next('td #EditText').find('span').click();
            return false;
        }
    });
});

Upvotes: 1

Views: 4158

Answers (3)

JesseBuesking
JesseBuesking

Reputation: 6586

I decided to take a wack at this also. I've created a jsfiddle for this guy, so check it out and let me know if it looks right.

Here's the js in a nutshell for my current example:

$('table tr td.EditText span input').live('keydown', function(e) {
    // get the code of the key that was pressed
    var code = e.keyCode ? e.keyCode : e.which;

    // varify that the tab key was pressed
    if (code === 13) {
        // get the next tr's input field, and set focus to it
        $(this).parents('tr').next().find('td.EditText span input').focus();

        // prevent any default actions
        if (e.preventDefault) {
            e.preventDefault();
        }
        return false;
    }
});

Upvotes: 0

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10077

I believe the line:

$(this).parent('tr').next('td #EditText').find('span').click();

should be:

$(this).next('td.EditText').find('span').focus();

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359776

It would be extremely helpful if you could show the actual markup, but I'll take a stab at it:

// Replace this
$(this).blur();
$(this).parent('tr').next('td #EditText').find('span').click();
// With this
$(this).blur().closest('td').next().find('td .EditText span').focus();

Upvotes: 1

Related Questions