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

// ページの 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);
休憩;
}
});
});
});