javascript - 使用jQuery聚焦到表格行中的.next()td文本框

我希望能够在单击.editbox后将其按下，然后将focus带到下一个.editbox。我已经把代码弄乱了一个小时，无法“找到”下一个元素。

这是我要做的代码。为了获得帮助，您可能需要更多背景信息。我做了jsfiddle来详细说明我要处理的内容。

//on tab
        $(".edit_tr").on('keydown', '.editbox', function(e) {
            var keyCode = e.keyCode || e.which;

            if (keyCode == 9) {
                e.preventDefault();
                var focus = $(document.activeElement);
                //console.log(focus);
                focus.closest('td').siblings('.editbox').focus();
                console.log(focus.parent().next('.editbox'));
            }
        });

最佳答案

在第41行上，您必须使用：

focus.closest('td').next().find(".editbox").show().focus();

这将返回到当前的td，查找以下td标记，搜索.editbox，然后在对它进行focus（）处理之前，必须先对其进行show（）处理（使其可见）。

此解决方案仅适用于1行。如果要使用Tab键在不同的行之间移动，则必须执行以下操作：

var nextEditbox = focus.closest('td').next().find(".editbox");
//check if there are still .editboxes on the same line
if(nextEditbox.length){
    //go for it and focus the next edit box on the same line
    nextEditbox.show().focus();
}
else {
    //move to the next line and search for the next editbox
    nextEditbox = focus.closest('tr').next().find(".edit_td:first").find(".editbox");

    //show and focus
    nextEditbox.show().focus();
}

//this will end the focusing and the .change() (which is defined above) will fire and do the ajax
focus.blur();

您必须自己隐藏.text元素。

编辑：这是Savebutton-Solution。我没有测试它，但是我认为它应该起作用。

var changes = [];
$(".editbox").change(function(){
   changes.push({ id : $(this).attr("id"), changed : $(this).attr("name"), data : $(this).val() });
});

$(".savebutton").click(function(){
   //AJAX SENDING THE changes VAR TO THE PHP FILE
});