jquery学習メモ2：編集可能なtables_jqueryを実装する

編集可能なテーブルのデモを実装します:

画像例:

" -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//tbodyの偶数trの背景色を#ECE9D8に設定 $("tbody tr:even") .css("background-color", "#ECE9D8");

//tbody の偶数 td を numTd に設定します

var numTd = $("tbody td:even");これらのセルを指定します マウス クリック イベントを登録します
numTd.click(function() {
//クリックされた要素の jquery オブジェクトを取得します
var tdObj = $(this);
//Ifクリックされた要素には入力が含まれます コントロールはクリック処理を実行しません
if (tdObj.children("input").length > 0) {
return false
}
// td コンテンツを取得します値を text に追加します
var text = tdObj.html();
//td
tdObj.html("");
//テキスト ボックスを作成し、削除しますテキスト ボックスの境界線を指定し、テキスト ボックスを設定します。 のテキスト フォント サイズは 16px です。
//テキスト ボックスの幅を td の幅と同じにし、テキスト ボックスの背景色を設定します。現在の td の内容をテキスト ボックスに配置する必要があります
//テキスト ボックスを配置します td に挿入します
var inputObj = $("").css(" border-width", "0")
.css("font-size", "16px").width(tdObj.width())
.css("background-color", tdObj.css( "background-color"))
.val(text).appendTo(tdObj);
//最初に focus イベントをトリガーし、次に select イベントをトリガーするようにトリガーを設定します
inputObj.trigger("focus" ).trigger("select");
//テキスト ボックスは挿入後に選択されます
inputObj.click(function() {
return false;
}); //キーアップ イベントを登録
inputObj.keyup(function(event) {
//現在押されているキーボード キーの値を取得します
var keycode =event.that;
//キャリッジ リターンを処理します
if (keycode == 13) {
//現在のテキストボックスの内容を取得します
var inputtext = $(this).val();
//td の内容を の内容に変更しますテキストボックス
tdObj.html(inputtext);
}
//Process esc
if (keycode == 27) {
//td の内容をテキストに復元します
tdObj.html(テキスト);
}
});
>
テーブル
{
ボーダー: 1px 黒塗り;
幅: 400px;
テーブル td
{
ボーダー: 1px ソリッドブラック;
}
テーブル th
{
ボーダー: 1px ソリッドブラック;
}
tbody th
{
background-color: #A3BAE9;
フォーム id="form1" runat="server">



テーブル項目をクリックして編集します

>
学生ID







🎜>

000002



/tr>


王五



000004



;/tr>





知識ポイント:
1.$(function() {}) は $(document).ready(function() {}) の略称です。
2. $("tbody td:even") の ":" はフィルタリングを意味し、even は偶数関数です。フィルタリング条件はヘルプドキュメントのセレクターに記載されています。この文は tbody に偶数の td を返すことを意味しており、結果は集合になります。
3. イベントでは、$(this) はこのコントロールの jquery オブジェクトを返します。
4.children("input") は、子要素に input が含まれるすべての jquery オブジェクトを取得することを意味し、結果はコレクションになります。
5.css("border-width", "0") は css 属性の値を設定することを意味します。
6.trigger("focus").trigger("select") は、設定イベントが最初にフォーカスをトリガーし、次に選択をトリガーすることを意味します。
7.keyup(function(event) {var keycode =event.that;}) はキーボードイベントを登録することを意味し、パラメータイベントの what 属性にはキーボード情報が格納されます。