jQuery: How to navigate from one td to a specific other td in a table

Question

I am new to jQuery so I might approach this the wrong way but hope someone here can help me.

I have a pretty large HTML table that is created dynamically. To help the user I would like to bind a navigation event to the arrow keys only for this table. In this example I would like to "jump" from on div to the next div (they also have the class "myClass"). The table is larger than the example below but the structure always repeats so every third td has an (editable) div.

So far I couldn't get this to work but the function does catch the arrow press as I can show alerts this way.

My jQuery:

$(document).on('keydown', '#tblCalendar', function(e){
    switch(e.which) {
        case 37: // left
            // similar action to the left
            break;                  
        case 39: // right
            $(this).closest('td').next().next().next().find('div').focus();
            break;          
        default: return; // exit handler
    }
    e.preventDefault(); // prevent default action
});

My HTML (simplified):

<tbody>
    <tr>
        <td></td>
        <td></td>
        <td><div class="myClass"></div></td>
        <td></td>
        <td></td>
        <td><div class="myClass"></div></td>
        // ...
    </tr>
    // ...
</tbody>

Many thanks in advance, Mike

tymeJV · Answer 1 · 2015-06-03T18:13:23.790

1

You should use nextUntil to find the next td with a div in it:

$(this).closest('td').nextUntil("td div").focus();

Although I'm not sure how a div can get focus

Since this is referring to the entire table, change the handler to watch for keypresses on the contenteditable div

$(document).on('keydown', '#tblCalendar tr td div', function(e){

edited Jun 03 '15 at 18:13

answered Jun 03 '15 at 17:53

tymeJV

103,943
14
161
157

Thanks a lot - that's exactly what I was looking for here ! If focus doesn't work here could I use .click() instead ? – keewee279 Jun 03 '15 at 17:59
Yes and it has the class myClass. – keewee279 Jun 03 '15 at 18:01
1

@keewee279 -- Try this: `$(this).closest('td').nextUntil("td div").get(0).focus();` – tymeJV Jun 03 '15 at 18:02
Thanks ! One more question, since I need the div, not the td, could I just say nextUntil('div') or do I need to add .find('div') in the above ? – keewee279 Jun 03 '15 at 18:03
@keewee279 -- You need the `td` in the selector, `nextUntil` looks at the next elements, so the `td` is necessary. – tymeJV Jun 03 '15 at 18:05
`this` refers to the table `tblCalendar` – Mackan Jun 03 '15 at 18:06
@Mackan: Yes, it does. – keewee279 Jun 03 '15 at 18:07
1

Yes, my point is that `closest` will not work, since `this` is the entire table, not the div like this code seems to expect. – Mackan Jun 03 '15 at 18:08
@Mackan -- Attach the key event to the individual divs then. – tymeJV Jun 03 '15 at 18:09
Not really my place to do so @tymeJV :) Just trying to assist in a solution that works – Mackan Jun 03 '15 at 18:10
@Mackan: Thanks - can you say what needs to be changed here ? – keewee279 Jun 03 '15 at 18:11
@keewee279 I suppose you could use `.myClass` as selector instead of `#tblCalendar` (in the `on keydown` event) – Mackan Jun 03 '15 at 18:14
@tymeJV: Thanks for this ! And then go with the get(0)... ? – keewee279 Jun 03 '15 at 18:18

insertusernamehere · Accepted Answer · 2015-06-03T18:33:23.550

I've rebuild your function a little bit. Now it would involves only one DOM request to collect all editable elements and stores them in a variable. You can rotate through all of them using the left and right arrow keys. If no element is selected, it gets the first one. I've added a class to demonstrate that behavior. To adjust this to your needs, simply replace .addClass('active') with .get(0).focus().

Example of the principal with a class that toggles

var focusable = $('div.myClass');
var current = null;

$(document).on('keydown', function(event) {
    var next = null;

    if (37 == event.which || 39 == event.which) {
        if (null == current) {
            current = 0;
            focusable.eq(current).addClass('active');
            return;
        }

        if (37 == event.which) {
            next = current - 1;
            if (0 > next) {
                next = focusable.length - 1;
            }
        }

        if (39 == event.which) {
            next = current + 1;
            if (focusable.length == next) {
                next = 0;
            }
        }

        focusable.eq(current).removeClass('active');
        focusable.eq(next).addClass('active');
        current = next;
    }
});

Reduced code when there's no class toggle involved

var focusable = $('div.myClass');
var current = null;

$(document).on('keydown', function(event) {
    if (37 == event.which || 39 == event.which) {
        if (null == current) {
            current = 0;
            focusable.eq(current).get(0).focus();
            return;
        }

        if (37 == event.which) {
            --current;
            if (0 > current) {
                current = focusable.length - 1;
            }
        }

        if (39 == event.which) {
            ++current;
            if (focusable.length == current) {
                current = 0;
            }
        }

        focusable.eq(current).get(0).focus();
    }
});

Demo

Try before buy
Try before buy with focusable divs

The demo doesn't seem to work for me - I don't see a table there. — keewee279, Jun 03 '15 at 18:18
@keewee279 Only the two elements have content - 1 and 2 - you have to focus the iFrame on the right side and then hit left or right. :) — insertusernamehere, Jun 03 '15 at 18:22
I like the approach with the class replaced the addClass two times with get(0).focus() but it doesnt work. — keewee279, Jun 03 '15 at 18:23
Got it - thanks ! :-) So it works in the demo now just not yet in my table. Do i have to adapt anything else other than the replacing two times ? — keewee279, Jun 03 '15 at 18:25
Thanks again - I forgot to update the first variable in your code, sorry. This is awesome and works exactly as intended ! — keewee279, Jun 03 '15 at 18:29
@keewee279 I've added a shorter code when the class toggle is not needed and only the focus is used. :) — insertusernamehere, Jun 03 '15 at 18:35

jQuery: How to navigate from one td to a specific other td in a table

2 Answers2