同じテーブルですか？異なるテーブル (編集可能な状態テーブル)

新しい一日が始まり、生活は続きます。今日共有したいのは、データを表示するために使用される通常のテーブルです。データを表示するだけでなく、データを編集することもできます。マウスでデータをクリックすると、対応するデータグリッドが編集可能になります。早速、今日のトピックに入りましょう:

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

JQueryProject1
;script type="text/javascript" src="js/jquery-1.8.1.min.js">

🎜>

< th>名前

;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コードを参照すると、中国語の文字化けバグが発生する可能性があります。試してみてください。この記事を最後まで読んでいただきありがとうございます。お役に立てれば幸いです。

/td> >
/td>	/td>

同じテーブルですか？異なるテーブル (編集可能な状態テーブル)_jquery