我有一个包含动态添加行的大型 HTML 表格。
该表具有标准结构(包括 thead、tbody 和 tfoot)。
在此表中有可编辑的 TD(具有 class "editable"
并包含 contenteditable div
)和不可编辑的 TD (它没有“可编辑”类,也不包含 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>
最佳答案
this
在你的代码中指的是 do document
not single element
如果你使用$(e.target)
你可以获得单个元素
您还应该使用 next()
函数而不是 nextUntil()
$(e.target).closest('td').nextAll('td.editable:first').find('div').text('test');
关于javascript - 自定义箭头键导航无法正常工作(一部分有效),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30775013/