jQuery：如何在 table 中从一个 td 导航到特定的其他 td

Question

我是 jQuery 的新手，所以我可能会以错误的方式处理这个问题，但希望这里有人可以帮助我。

我有一个动态创建的相当大的 HTML table。为了帮助用户，我想 将导航事件绑定到箭头键 仅用于此 table。在这个例子中，我想 "jump" 从 div 到下一个 div （他们也有 class "myClass"). table 比下面的示例大，但结构始终重复，因此每三个 td 都有一个 (editable) div。

到目前为止，我无法让它工作，但该功能确实捕捉到箭头按下，因为我可以通过这种方式显示警报。

我的jQuery:

$(document).on('keydown', '#tblCalendar', function(e){
    switch(e.which) {
        case 37: // left
            // similar action to the left
            break;                  
        case 39: // right
            $(this).closest('td').next().next().next().find('div').focus();
            break;          
        default: return; // exit handler
    }
    e.preventDefault(); // prevent default action
});

我的HTML（简体）：

<tbody>
    <tr>
        <td></td>
        <td></td>
        <td><div class="myClass"></div></td>
        <td></td>
        <td></td>
        <td><div class="myClass"></div></td>
        // ...
    </tr>
    // ...
</tbody>

非常感谢，麦克

Answer 1

您应该使用 nextUntil 来查找下一个 td，其中包含 div：

$(this).closest('td').nextUntil("td div").focus();

虽然我不确定div如何得到focus

由于 this 指的是整个 table，更改处理程序以监视 contenteditable div

上的按键

$(document).on('keydown', '#tblCalendar tr td div', function(e){

Answer 2

我已经稍微重建了你的功能。现在它只涉及一个 DOM 请求来收集所有可编辑元素并将它们存储在一个变量中。您可以使用 left 和 right 箭头键旋转浏览所有这些内容。如果没有选择元素，它会获取第一个。我在 demonstrate that behavior 中添加了 class。要根据您的需要进行调整，只需将 .addClass('active') 替换为 .get(0).focus()。

带有 class 切换

的主体示例

var focusable = $('div.myClass');
var current = null;

$(document).on('keydown', function(event) {
    var next = null;

    if (37 == event.which || 39 == event.which) {
        if (null == current) {
            current = 0;
            focusable.eq(current).addClass('active');
            return;
        }

        if (37 == event.which) {
            next = current - 1;
            if (0 > next) {
                next = focusable.length - 1;
            }
        }

        if (39 == event.which) {
            next = current + 1;
            if (focusable.length == next) {
                next = 0;
            }
        }

        focusable.eq(current).removeClass('active');
        focusable.eq(next).addClass('active');
        current = next;
    }
});

在不涉及 class 切换时减少代码

var focusable = $('div.myClass');
var current = null;

$(document).on('keydown', function(event) {
    if (37 == event.which || 39 == event.which) {
        if (null == current) {
            current = 0;
            focusable.eq(current).get(0).focus();
            return;
        }

        if (37 == event.which) {
            --current;
            if (0 > current) {
                current = focusable.length - 1;
            }
        }

        if (39 == event.which) {
            ++current;
            if (focusable.length == current) {
                current = 0;
            }
        }

        focusable.eq(current).get(0).focus();
    }
});

演示

Try before buy
Try before buy with focusable divs

jQuery：如何在 table 中从一个 td 导航到特定的其他 td

jQuery: How to navigate from one td to a specific other td in a table

html

javascript

jquery

arrow-keys