SQLの窓

2017年10月12日


テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました



とにかく、複雑になってしまったので絵にしてみました。

デモページ(送信ボタンで一覧表示した後でデモ)


ソースコードはこんな感じ
	$("#data .row_data").each(function(i){

		var td = $(this).find("td").eq(2);

		td.css( 
			{ "text-decoration":"underline", "cursor":"crosshair", "background-color" : "pink" }
		);

		// 入力内容
		var text = td.text();
		// 入力内容を保存
		td.data("text", text );

		td.on("click", function(){
			if ( $(this).data("input") != "use" ) {
				// 入力切替えフラグ
				$(this).data("input", "use" );

				// 入力内容
				var text_now = $(this).text();

				// TD の表示を消去
				$(this).text("");

				// 入力を追加
				$("<input>")
						.appendTo($(this))		// TD に追加
						.val(text_now)			// テキストセット
						.focus()			// フォーカスセット
						// focusout で元に戻す
						.on( "focusout", function(){

							// 現在の入力
							var text = $(this).val();

							// 親 TD
							var td = $(this).parent();

							// データが変更されていたら『変更フラグ』をセット
							if ( text != td.data("text") ) {
								td.data("change", "yes");
								td.css("background-color","silver");
							}
							else {
								td.data("change", "");
								td.css("background-color","pink");
							}

							// TD に値を戻して 切替えフラグを消去
							td
								.append(text)
								.data("input", "" );

							// INPUT を削除
							$(this).remove();


						});

			}

		});

	});



【jQueryの最新記事】
posted by lightbox at 2017-10-12 03:17 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり