2

以下のコードを使用して編集ボックスを挿入し、入力時に完全に機能している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>

Enter キーを押して保存が完了したら、次の編集ボックスをフォーカスして自動的に選択したいと考えています。そのため、Enter キーを押した後の各エントリの後、次のエントリが選択されてフォーカスされます。各行には他のセルがありますが、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');
        });
    });
4

1 に答える 1

0

キーダウン イベントを編集ボックスの入力にバインドしてみてください。キーを押すと、次のセルのクリック イベントが発生するはずです。

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

これが役立つことを願っています

于 2013-06-03T06:18:19.757 に答える