新しい一日が始まり、生活は続きます。今日共有したいのは、データを表示するために使用される通常のテーブルです。データを表示するだけでなく、データを編集することもできます。マウスでデータをクリックすると、対応するデータ グリッドが編集可能になります。早速、今日のトピックに入りましょう: コピーコード コードは次のとおりです: JQueryProject1 ;script type="text/javascript" src="js/jquery-1.8.1.min.js"> 🎜>< th>名前 /td> >/td> /td> ;Zhao Liu はい、これはまったくスタイルのない通常のテーブルです。このテーブルに CSS スタイルを導入しましょう。 >コードをコピーします コードは次のとおりです: table{ width:400px; height: 150px; テーブル、テーブル td、テーブル th{ border:1px ソリッドブラック; border-collapse: 折りたたむ } table td{ width:50%; ; } こちら{ 背景色:#87CEFA; こちら{ 背景色:# FFFACD; HTML ページには編集可能なページ要素がいくつかしかありませんが、テーブルを編集可能にするには、テーブルに編集可能なページ要素を追加して装飾する必要があります。 CSS を使用して通常のテーブルのように見せますが、編集可能な関数を使用します。JS コードは次のとおりです。コードをコピーします。 > コードは次のとおりです: $(function(){ var content; $( "#content tr:odd").css( "背景色","#D2B48C"); $("#content tr:even").css("背景色","#C0C0C0") ; $("#content td") ).click(function(){ var clickObj = $(this); content = clickObj.html(); changeToEdit(clickObj); });ノード){ node.html(""); var inputObj = $(""); inputObj.css("border","0 ").css("背景色",node.css("背景色")) .css("フォントサイズ",node.css("フォントサイズ")).css("高さ" ","20px") .css("width",node.css("width")).val(content).appendTo(node) .get(0).select(); inputObj.click(function(){ return false; }).keyup(function(event){ var keyvalue =event.that; if(keyvalue==13){ node.html(node.children("input").val()); } if(keyvalue==27){ ノード .html(コンテンツ); 🎜>}).blur(function(){ if(node.children("input").val()!=content){ if(confirm ("変更したコンテンツを保存しますか? ","はい","いいえ")){ node.html(node.children("input").val()); }else{ node.html(content); } }else{ node.html(コンテンツ) } }); 次に、この JS の簡単な分析を行ってみましょう。編集前にテーブルの内容を保存するために、グローバル変数 var content が使用されます。そのため、ユーザーはテーブルを編集しますが、編集結果を保存したくない場合があります。テーブルを保存するには、 の内容が編集前の状態に復元されるため、マウスをクリックしたときは、最初にテーブルの内容を保存する必要があります。 次の 2 つの文 $("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background -color","#C0C0C0"); は、テーブルの可視性を高めるために、テーブルの行の色を交互に変更することです。 var inputObj = $(""); この文は編集可能な JQuery オブジェクトを生成し、以下の .css() メソッドに CSS を追加します。 style を inputObj オブジェクトに追加します。.css() メソッドは、オブジェクトの CSS スタイルを設定するだけでなく、オブジェクトの CSS スタイルを取得することもできます。多くの場合、JQuery メソッドの実行後に JQuery オブジェクトが返されるため、inputObj.css().css().css().... が表示されます。 appendTo() メソッドはテーブルの編集可能性を実現し (appendix() も使用可能)、編集可能な要素をテーブルに挿入します。 2 つのメソッド .get(0).select() は、編集可能な要素にフォーカスが置かれるように、inputObj 内のコンテンツを選択するために使用されます。これらの 2 つのメソッドは、appendTo()、inputObj.click( の後に記述する必要があることに注意してください。 function(){}) メソッドも必須です。このメソッドを削除すると興味深いバグが発生します。試してみてください。 次の keyup(function(event){}) を使用すると、event.that を通じてキーボードで押されたキーに対応するキー値を取得できます。一般的に使用されるキー値には、Enter キー 13、13 が含まれます。 Esc キー:27 ユーザーが Enter キーを押すと、編集した内容が保存され、テーブルが通常のテーブルに戻ります。ユーザーがテーブルの内容を復元し、テーブルが元のテーブルに戻ります。普通のテーブル。 ユーザー エクスペリエンス、Apple の出現により、この言葉の人気がさらに高まりました。私たちもその楽しみに参加するためにここにいます。ユーザー エクスペリエンスを向上させるために、ここに Blur(function(){}) メソッドが追加されています。フォーカスが編集可能な要素から離れたときに、まずテーブル内のコンテンツが変更されたかどうかを確認し、変更がない場合は直接復元します。テーブルとテーブルの内容に変更がある場合、保存するかどうかをユーザーに確認します。 今日のサンプルはほぼ完成しました。別のJSファイルでJSコードを参照すると、中国語の文字化けバグが発生する可能性があります。試してみてください。この記事を最後まで読んでいただきありがとうございます。お役に立てれば幸いです。