JQuery td内联编辑 - >进入下一个编辑单元后?

时间:2013-06-03 05:35:54

标签: php jquery mysql ajax html-table

我使用下面的代码插入一个编辑框,然后输入将结果保存到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或edit 我无法努力让它发挥作用并且到处寻找

任何帮助都会很棒。

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

1 个答案:

答案 0 :(得分:0)

您可以尝试将keydown事件绑定到编辑框输入。在按键时,它应该触发下一个单元格的click事件。

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

希望这有用