Question

我希望能够在点击.editbox后按Tab键，然后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'));
            } 
        });

Answer 1

在第41行，您必须使用：

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

这将返回到当前td，查找以下td标记，搜索.editbox，然后在您可以对其进行focus（）之前，您必须显示（）它（制作它）可见）首先。

此解决方案仅适用于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
});

Answer 2

似乎

$(".edit_tr").on('keydown', '.editbox', function(e) {

应该是

$(".edit_td").on('keydown', '.editbox', function(e) {

此外，JQuery editTable可能符合您的要求。

使用jQuery关注表行中的.next（）td文本框

2 个答案: