tabbing между jeditable полями в таблице

Question

Я использую код отсюда http://www.korvus.com/blog/geek/making-the-tab-key-work-with-jeditable-fields/, чтобы получить вкладку между рабочими полями jeditable, и если поля сами по себе, это отлично работает. Однако мне нужно, чтобы мои поля были в таблице, и единственный раз, когда работает вкладка, является табуляция с последнего поля на первое, и, конечно, мне нужно, чтобы она была от первого до следующего и так далее ...

$('div.edit').bind('keydown', function(evt) { 
if(evt.keyCode==9) { 
    $(this).find("input").blur(); 
    var nextBox=''; 

    if ($("div.edit").index(this) == ($("div.edit").length-1)) { 
      nextBox=$("div.edit:first");   //last box, go to first 
     } else { 
      nextBox=$(this).next("div.edit"); //Next box in line 
     } 
    $(nextBox).click(); //Go to assigned next box 
    return false;   //Suppress normal tab 
}; 
}); 

таблица форматируется как это

<table> 

<tr> 
    <td class='leftcolumn'> 
    <strong>Firstname:</strong> 
    </td> 
    <td> 
    <div class='edit' id='firstname'><?=$userdetail['firstname']?></div> 
    </td> 
</tr> 

<tr> 
    <td class='leftcolumn'> 
    <strong>Lastname:</strong> 
    </td> 
    <td> 
    <div class='edit' id='lastname'><?=$userdetail['lastname']?></div> 
    </td> 
</tr> 
</table> 

заранее спасибо

Answer 1

Я считаю, что вопрос заключается в том, что ваши входные поля не являются прямыми братьями и сестрами друг с другом, таким образом, «следующий()» не удается. Я думаю, что это будет работать:

$('div.edit').bind('keydown', function(evt) { 
if(evt.keyCode==9) { 
    var nextBox=''; 
    var currentBoxIndex=$("div.edit").index(this); 
    if (currentBoxIndex == ($("div.edit").length-1)) { 
      nextBox=$("div.edit:first");   //last box, go to first 
     } else { 
      nextBox=$("div.edit").eq(currentBoxIndex+1); //Next box in line 
     } 
    $(this).find("input").blur(); 
    $(nextBox).click(); //Go to assigned next box 
    return false;   //Suppress normal tab 
}; 
});