jQuery を使用して編集可能な tables_jquery を実装する-jsチュートリアル-php.cn

今日は、jQuery を使用して編集可能なテーブルを実装する例を学びました。この例の要件は次のとおりです。前景テーブルのセルをクリックして内容を変更し、Enter を押して変更した内容を保存し、esc を押して保存した内容を元に戻します。原則: クライアント テーブルのセルをクリックすると、セルにテキスト ボックスを追加し、セル内の元の内容をテキスト ボックスに割り当て、テキスト ボックスの内容をさらに変更します。変更後に、テキスト ボックスの内容をセルに再割り当てします。

ソース コード:

フロントエンド コード:

コードをコピー コードは次のとおりです。 html jq2—編集可能なテーブル --%> 🎜 > マウスをクリックすると、

名前 ; /td> > 000002 李思 /td> > ;

>

コードをコピー

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

body { } table { border:1px Solid #000000; border-collapse:collapse ;/*セル境界線の結合*/ width:400px; } table td { border:1px Solid #000000; 幅:50%; } テーブル th { border:1px ソリッド width:50%; tbody th { -color:#426fae; } jquery コード コードをコピー

コードは以下のように: $(function () { //最初の tr を除くテーブル内のすべての偶数行を検索します tr //tbody を介してすべての tr 要素を返すために Even を使用します tr $( "tbody tr:even").css("background-color", "#ece9d8"); //すべての生徒番号セルを検索 var numId = $("tbody td:even");

//セルのマウス クリック イベントを登録します numId.click(function () { //現在のマウス クリックに対応する td を見つけます。これは、 click var tdObj = $(this); // td if (tdObj.children("input").length>0) { return false ; } //テーブルのコンテンツを取得します var text = tdObj.html(); //td tdObj.html(""); 🎜>//テキスト ボックスを作成します //テキスト ボックスの境界線を削除します //テキスト ボックスのフォント サイズを表内のテキストと同じに設定します //背景を設定しますテキスト ボックスの色をテーブルの背景色と同じにする //テキスト ボックスの幅は td の幅と同じです //td の値をテキスト ボックスに入力します。 //テキスト ボックスを td に挿入します var inputObj = $(" ").css("border-width", "0").css("font -size", tdObj.css("font-size")).css("background-color ", tdObj.css("background-color")).width(tdObj.width()).val(text)。 appendTo(tdObj); //テキスト ボックスが挿入された後、最初にフォーカスを取得してから選択します inputObj.trigger("focus").trigger("select") //クリックテキスト ボックスの挿入後にイベントをトリガーすることはできません inputObj.click(function () { return false; }); テキストの Enter キーと Esc キーの操作を処理します。 box inputObj.keyup(function (event) { //現在押されているキーボードのキー値を取得します var keycode =event.that; //キャリッジリターンを処理します if ( keycode==13) { //現在のテキストボックスの内容を取得します var inputtext = $(this).val () //td の内容をテキストの内容に変更しますbox tdObj.html(inputtext); } //esc if (keycode== 27) { //td の内容を元の内容に戻す tdObj.html(text); } });

を通じて得られる知識ポイントこの例から学ぶこと:

1. HTML 1.table には thead と tbody を含めることができます

2. テーブル ヘッダーのコンテンツは に配置できます。 3. テーブル{} この書き込み方法はラベル セレクターと呼ばれ、テーブル全体に影響を与える可能性があります。

4.table td{} は、テーブルに含まれるすべての td を表します。

2. jquery の観点では、

$() は括弧内に 4 つの異なるパラメーターを置くことができます。パラメーターを関数に直接入れて、ページがロードされていることを示します。 : たとえば、上記の jquery コードの行 1 $(function(){})

2. パラメーターは CSS クラス セレクターにすることができ、jquery オブジェクトにパッケージ化されます。例: 上記の例の jquery コードの 4 行目 $("tbody tr:even")

3. パラメーターが HTML テキストの場合、dom ノードを作成して jquery オブジェクトにパッケージ化できます。 。例: 上記の例の jquery コードの 27 行目 $(" ")

4. このメソッドは dom オブジェクトを置き換えることと同じです。 dom オブジェクトを jquery オブジェクトに変換します。上記の例の jquery コードの 11 行目 var tdObj = $(this)

この例の jquery オブジェクト

1. jquery オブジェクトの後に css 属性を追加して、次の css 属性を設定します。ノード。たとえば、上記の例の jquery コードの 4 行目 $("tbody tr:even").css("background-color", "#ece9d8");

2.jquery オブジェクトのコンテンツには選択が含まれていますデバイスに対応する DOM ノードが配列に保存されます。

3. jquery オブジェクトの後に html メソッドを追加すると、ノードの HTML コンテンツを設定または取得できます。たとえば、上記の例の jquery コードの 17 行目 var text = tdObj.html()

4. jquery オブジェクトの後に val メソッドを追加すると、ノードの値を取得または設定できます。たとえば、上記の例では、jquery コードの 41 行目 var inputtext = $(this).val()

5. jquery オブジェクトの後に width メソッドを追加すると、ノードの幅を設定または取得できます。 。たとえば、上記の例の jquery コードの 27 行目は tdObj.width()

6 です。 jquery オブジェクトの後に appendTo メソッドを追加すると、ノードを別のノードのすべての子ノードに追加できます。たとえば、上記の例では、jquery コード

7 の行 27 appendTo(tdObj) で、jquery オブジェクトの後にトリガー メソッドを追加すると、js イベントの発生をトリガーできます。たとえば、上記の例では、jquery コードの 29 行目 inputObj.trigger("focus").trigger("select")

8. jquery オブジェクトの後に Children メソッドを追加すると、子ノードを取得できます。特定のノードのパラメータを定式化して、子ノードのコンテンツを制限できます。たとえば、上記の例の jquery コードの 13 行目 tdObj.children("input").length

9。セレクターによって返された jquery オブジェクトに複数の dom ノードが含まれている場合は、同様のクリック イベントを登録します。このオブジェクトでは、すべての DOM ノードがこのイベントに使用されます。たとえば、上記の例の jquery コードの行 9 numId.click。