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

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

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

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Array.prototype.concat は [翻訳]_javascript スキルを否定するための普遍的な方法ではありません次の記事：Array.prototype.concat は [翻訳]_javascript スキルを否定するための普遍的な方法ではありません

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved

/td> >
/td>	/td>