переход между редактируемыми полями в таблице

Я использую код отсюда 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>

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


jquery jeditable
person matjkd    schedule 08.10.2010    source источник
comment
см. stackoverflow.com/questions/885616/   -  person Mike Henke    schedule 01.09.2011

Ответы (1)


arrow_upward
8
arrow_downward

Я считаю, что проблема в том, что ваши поля ввода не являются прямыми родственниками друг друга, поэтому "next()" не работает. Я думаю, это сработает:

$('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
};
});
person SylvanK    schedule 20.09.2011
comment
Это сработало для меня! За исключением того, что мне нужна одна корректировка... ты можешь мне помочь, @SylvanK? stackoverflow.com/questions/24935069 / - person user2847749; 24.07.2014