自定义箭头键导航无法正常工作（一部分工作）

我有一个大的HTML表格，动态添加行。自定义箭头键导航无法正常工作（一部分工作）

该表具有标准结构（包括THEAD，TBODY和TFOOT）。

在这个表中有可编辑的TD（其中有class "editable"和含有contenteditable div）和不可编辑的TD（其中dont't有类“编辑”，不包含一个div）。

我正在尝试创建自定义箭头键导航，允许我从一个可编辑的TD跳转到下一个或上一个（如在Excel表格中）。

为了测试此我使用了下面的例子，但此仅适用部分，即正确地示出的警报，但我不能够做与相应的div任何东西（例如改变它的背景或添加文本等）。

有人能告诉我我在做什么错吗？

我的jQuery（在文档准备）：

$(document).keydown(function(e){ 
    switch(e.which){ 
     case 37: // left arrow 
      alert('test left'); 
      $(this).closest('td').prevUntil('td.editable').find('div').text('test'); 
      break; 
     case 39: // right arrow 
      alert('test right'); 
      $(this).closest('td').nextUntil('td.editable').find('div').text('test'); 
      break; 
     default: // exit for other keys 
      return; 
    } 
    e.preventDefault(); // prevent default action 
});

我的HTML（例如行）：

<tr> 
    // ... 
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable --> 
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable --> 
    <td></td> <!-- non-editable --> 
    <td></td> <!-- non-editable --> 
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable --> 
    // ... 
</tr>

来源

2015-06-11 keewee279

请参见[56，“问题‘’包括在他们的头衔？”标签（http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles），其中共识是“不，他们不应该”！ –

this在你的代码是指做document不是单一元素

如果你使用$(e.target)你可以得到单身元素

而且你应该使用next()函数代替nextUntil()

$(e.target).closest('td').nextAll('td.editable:first').find('div').text('test');

来源

2015-06-11 08:16:46 suvroc

非常感谢！如果所有的TD都是可编辑的，但是如果在其间不可编辑的情况下则不适用+它看起来不适用于TR，即从最后一个可编辑的TD跳到下一行的第一个TD。对此有何想法？ – keewee279

我编辑过，现在它可以编辑td – suvroc

工作谢谢 - 让我的支票。 :) – keewee279

自定义箭头键导航无法正常工作（一部分工作）

回答

相关问题