編集可能なテーブルのデモを実装します: 画像例: " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <u>//簡易化済み書き方：ページロード時に</u>$(function() { </a>//tbodyの偶数trの背景色を#ECE9D8に設定 </span>$("tbody tr:even") .css("background-color", "#ECE9D8"); </div>//tbody の偶数 td を numTd に設定します <div class="codebody" id="code17724">var numTd = $("tbody td:even");これらのセルを指定します マウス クリック イベントを登録します <br>numTd.click(function() { <br>//クリックされた要素の jquery オブジェクトを取得します <br>var tdObj = $(this); <br>//Ifクリックされた要素には入力が含まれます コントロールはクリック処理を実行しません <br>if (tdObj.children("input").length > 0) { <br>return false <br>} <br>// td コンテンツを取得します値を text に追加します <br>var text = tdObj.html(); <br>//td<br>tdObj.html(""); <br>//テキスト ボックスを作成し、削除しますテキスト ボックスの境界線を指定し、テキスト ボックスを設定します。 のテキスト フォント サイズは 16px です。 <br>//テキスト ボックスの幅を td の幅と同じにし、テキスト ボックスの背景色を設定します。現在の td の内容をテキスト ボックスに配置する必要があります <br>//テキスト ボックスを配置します td に挿入します <br>var inputObj = $("<input type='text'>").css(" border-width", "0") <br>.css("font-size", "16px").width(tdObj.width()) <br>.css("background-color", tdObj.css( "background-color")) <br>.val(text).appendTo(tdObj); <br>//最初に focus イベントをトリガーし、次に select イベントをトリガーするようにトリガーを設定します<br>inputObj.trigger("focus" ).trigger("select"); <br>//テキスト ボックスは挿入後に選択されます<br>inputObj.click(function() { <br>return false; <br>}); //キーアップ イベントを登録<br>inputObj.keyup(function(event) { <br>//現在押されているキーボード キーの値を取得します<br>var keycode =event.that; <br>//キャリッジ リターンを処理します<br> if (keycode == 13) { <br>//現在のテキストボックスの内容を取得します<br>var inputtext = $(this).val(); <br>//td の内容を の内容に変更しますテキストボックス<br>tdObj.html(inputtext); <br>} <br>//Process esc <br>if (keycode == 27) { <br>//td の内容をテキストに復元します <br> tdObj.html(テキスト); <br>} <br>}); <br> > テーブル { ボーダー: 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 属性にはキーボード情報が格納されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
