php - JQuery td 内联编辑 -> 输入后转到下一个编辑单元格？

Question

我正在使用下面的代码插入一个编辑框，并在输入时将结果保存到运行良好的 MySQL 数据库

要编辑的表格单元格看起来像

<tr><td class="edit tbl_tracking 92"></td></tr>
<tr><td class="edit tbl_tracking 96"></td></tr>
<tr><td class="edit tbl_tracking 101"></td></tr>

按回车键并保存完成后，我想自动选择下一个具有焦点的编辑框。因此，在按下回车键后的每个条目之后，下一个条目将被选择并聚焦。每行中还有其他单元格，但现在需要 div 或编辑我无法解决问题，到处都找过

任何帮助都会很棒。

$(document).ready(function () {
        $('td.edit').click(function () {
            $('.ajax').html($('.ajax input').val());
            $('.ajax').removeClass('ajax');
            $(this).addClass('ajax');
            $OLDVAL = $(this).text();
            $(this).html('<input id="editbox" size="20" type="text" 
                                    value="' + $(this).text() + '">');
            $('#editbox').focus();
        });

        $('td.edit').keydown(function (event) {
            arr = $(this).attr('class').split(" ");
            if (event.which == 13) {
                $.ajax({
                    type: "POST",
                    url: "ajaxpost.php",
                    data: "value=" + $('.ajax input').val() + "&rownum=" 
                                               + arr[2] + "&field=" + arr[1],
                    success: function (data) {
                        $('.ajax').html($('.ajax input').val());
                        $('.ajax').removeClass('ajax');
                    }
                });
            }
        });

        $('#editbox').live('blur', function () {
            $('.ajax').html($('.ajax input').val());
            $('.ajax').html($OLDVAL);
            $('.ajax').removeClass('ajax');
        });
    });

Answer 1

您可以尝试将 keydown 事件绑定(bind)到编辑框输入。按下键时，它应该触发下一个单元格的点击事件。

$('#editbox').keydown(function(event){
if (event.which == 13)$(this).parent().parent().next().children(':first').trigger('click');
});

希望对你有帮助