JQuery_jquery に基づいて編集可能なテーブル効果を作成する

私は最近、あるプロジェクトに取り組んでいます。プロジェクトの要件は次のとおりです。テーブルをクリックして直接編集し、Enter キーを押すかページの他の場所をクリックして編集を有効にし、Esc キーを押して編集をキャンセルします

2 人の友人が 2 つの解決策を出しました。どちらがより適切か見てみましょう。

テーブルをクリックして編集する最初の方法

コードをコピー コードは次のとおりです:

// ページの body タグに onload イベントを追加するのと同等
$(function() {
//すべての td ノードを検索します
var tds = $("td");
//クリックイベントをすべての td
に追加します tds.click(function() {
//現在クリックされているオブジェクトを取得します
var td = $(this);
// 現在の td のテキスト内容を取り出して保存します
var oldText = td.text();
//テキスト ボックスを作成し、テキスト ボックスの値を保存した値に設定します
var input = $("");
//現在の td オブジェクトの内容を input
に設定します td.html(入力);
//テキストボックスのクリックイベントを無効に設定します
input.click(function() {
return false;
});
//テキストボックスのスタイルを設定します
input.css("border-width", "0");
input.css("font-size", "16px");
input.css("text-align", "center");
//テキストボックスの幅を td
の幅と等しく設定します。 input.width(td.width());
//テキスト ボックスがフォーカスを取得したときにすべて選択イベントをトリガーします
input.trigger("focus").trigger("select");
//テキスト ボックスがフォーカスを失うと、テキストに戻ります
input.blur(function() {
var input_blur = $(this);
// 現在のテキスト ボックスの内容を保存します
var newText = input_blur.val();
td.html(newText);
});
//キーボードイベントへの応答
input.keyup(function(event) {
// キー値を取得します var keyEvent = window.event;
var key = keyEvent.keyCode;
// 現在のオブジェクトを取得します
var input_blur = $(this);
スイッチ (キー)
{
case 13://Enter キーを押して、現在のテキスト ボックスの内容を保存します
var newText = input_blur.val();
td.html(newText);
休憩;
case 27://esc キーを押して変更をキャンセルし、テキスト ボックスをテキストに変えます
td.html(oldText);
休憩;
}
});
});
});

テーブルをクリックして編集する 2 番目の方法

コードをコピー コードは次のとおりです:

$(document).ready(function(){
    var tds = $("td");
    tds.click(tdClick);
});
関数 tdClick(){
    var tdnode = $(this);
    var tdtext = tdnode.text();
    tdnode.html("");
    var input = $("");
    input.val(tdtext); // input.attr("value",tdtext);
    input.keyup(関数(イベント){
        var myEvent = イベント || window.event;
        var keyCode = myEvent.keyCode;
        if(keyCode == 13){
            var inputnode = $(this);
            var inputtext = inputnode.val();
            var td = inputnode.parent();
            td.html(入力テキスト);
            td.click(tdClick);
        }
        if(keyCode == 27){ // 判断否按下ESC键
            $(this).parent().html(tdtext);
            $(this).parent().click(tdClick);
        }
    });
    tdnode.append(入力);
    tdnode.children("input").trigger("select");
    //入框失去焦点、実行方法
    input.blur(function(){
        tdnode.html($(this).val());
        tdnode.click(tdClick);
    });
    tdnode.unbind("クリック");
}

より良いことを言うと、私は 2 番目のものをもっと喜んでいます、小さな友人は何ですか、私を歓迎します。