jQuery td内联编辑->输入后进入下一个编辑单元格？

Question

I am using the code below to insert a edit box, and on enter save the result to MySQL database which is working perfectly

The table cells to edit look like

<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>

After pressing enter and the save is complete I want to automatically select the next edit box with it being focused. So after each entry after pressing enter the next one down is selected and focused. There are other cells in each row but have now div or edit required I cannot work out to to get it working and have looked everywhere

Any help would be great.

$(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

you may try to bind a keydown event to the edit box input. On key down, it should fire the click event of the next cell.

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

hope this is helpful