Question

我有一个包含动态添加行的大型HTML表。

该表具有标准结构（包括thead，tbody和tfoot）。

在此表中，可编辑的道具（包含Controls且包含class "editable"）和不可编辑的道具（不具备“可编辑的类别”） “并且不包含div。

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

为了测试这个，我使用了下面的例子，但这只能部分工作，即警报显示正确，但我无法对相应的div做任何事情（例如更改其背景或添加文本等）。

有人可以告诉我这里做错了吗？

我的jQuery（已准备就绪）：

contenteditable div

我的HTML（示例行）：

$(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
});

Answer 1

代码中的

this是指document而不是单个元素

如果您使用$(e.target)，则可以获得单个元素

此外，您应使用next()功能代替nextUntil()

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

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

1 个答案: