SQLの窓

2017年10月29日


TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン

テーブルの TD 要素の中がテキストのみの場合、tableinput.js プラグインで入力可能になります

オプションを省略したり、rowstart を省略すると、先頭の行を対象外にします。( rowstart の デフォルトは 1 )

tableinputEach によってテーブルの一覧を td のコレクション(jQuery のオブジェクト)単位で取得します

td.data("change") で、データが変更されたかどうかを取得できます
td.data("text") で最初のデータを取得できます

▼ 画像


▼ デモ実行
コード 氏名 フリガナ
0001 浦岡 友也 ウラオカ トモヤ
0002 山村 ひろよ ヤマムラ ヒロヨ
0003 多岡 冬行 タオカ フユユキ
0004 高田 冬美 タカタ フユミ
0005 内高 友之 ウチタカ トモユキ

上のデモのコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/template/lightbox-env/tableinput.js" charset="utf-8"></script>
<style>
.inputtd {
	text-decoration: underline;
	cursor: crosshair;
	background-color: pink;
}
.tableinput {
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
	font-size: 16px;
}

#target_table {
	border-collapse: collapse;
	border: solid #c0c0c0 1px;
	background-color: #FFFFFF;
}
#target_table  th {
	padding: 10px;
	border: solid #808080 1px;
	background-color: silver;
}
#target_table td {
	padding: 10px;
	border: solid #c0c0c0 1px;
}
</style>
<input type="button" id="tableinput_action" value="実装">
<input type="button" id="tableinput_check" value="変更の確認" disabled>
<table id="target_table">
<tbody>
	<tr>
		<th>コード</th>
		<th style='width:200px'>氏名</th>
		<th style='width:200px'>フリガナ</th>
	</tr>
	<tr>
		<td>0001</td>
		<td>浦岡 友也</td>
		<td>ウラオカ トモヤ</td>
	</tr>
	<tr>
		<td>0002</td>
		<td>山村 ひろよ</td>
		<td>ヤマムラ ヒロヨ</td>
	</tr>
	<tr>
		<td>0003</td>
		<td>多岡 冬行</td>
		<td>タオカ フユユキ</td>
	</tr>
	<tr>
		<td>0004</td>
		<td>高田 冬美</td>
		<td>タカタ フユミ</td>
	</tr>
	<tr>
		<td>0005</td>
		<td>内高 友之</td>
		<td>ウチタカ トモユキ</td>
	</tr>
</tbody>
</table>
<div id="result"></div>
<script>
$("#tableinput_action").on("click", function(){
	$("#target_table")
		.tableinput({ "inputwidth": "180px", "maxlength": 50, "col": 1, "class": "inputtd", "inputclass": "tableinput" })
		.tableinput({ "inputwidth": "180px", "maxlength": 50, "col": 2, "class": "inputtd", "inputclass": "tableinput" })
	;

	$(this).prop("disabled", true );
	$("#tableinput_check").prop("disabled", false );
});

$("#tableinput_check").on("click", function(){

	var text = "";
	$("#target_table").tableinputEach(function(i,row){

		// 1行目を処理しない
		if ( i == 0 ) {
			return;
		}

		// row は、td のコレクション
		var td1 = row.eq(1);
		var td2 = row.eq(2);

		// データが変更されていた場合
		if ( td1.data("change") || td2.data("change") ) {

			text +=  i + " : " + td1.text() + " : " + td2.text();
			text +=  " / 元データ : " + td1.data("text") + " : " + td2.data("text") + "<br>";

		}

	});

	$("#result").html(text);

});
</script>

tableinput.js のコード

$.fn.extend({
	tableinput : function(option){

		option = option || { "rowstart":1, "col": 0 };
		if ( typeof option.rowstart ===  'undefined' ) {
			option.rowstart = 1;
		}
		if ( typeof option.col ===  'undefined' ) {
			option.col = 0;
		}

		this.data("tableinput_option_" + option.col, option);

		this.find("tr").each(function(i){

			if ( i < option.rowstart ) {
				return;
			}

			var td = $(this).find("td").eq(option.col);
			if ( typeof option.class !==  'undefined' ) {
				td.addClass( option.class );
			}

			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("");
					// 入力を追加
					var input = $("<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");
								}
								else {
									td.data("change", "");
								}
								// TD に値を戻して 切替えフラグを消去
								td
									.append(text)
									.data("input", "" );
								// INPUT を削除
								$(this).remove();
							});
					if ( typeof option.inputwidth !==  'undefined' ) {
						input.css("width", option.inputwidth );
					}
					if ( typeof option.maxlength !==  'undefined' ) {
						input.prop("maxlength", option.maxlength );
					}
					if ( typeof option.inputclass !==  'undefined' ) {
						input.addClass( option.inputclass );
					}

				}
			});
		});
		// 自分自身を返す
		return this;
	},
	tableinputEach : function(func){

		this.find("tr").each(function(i){

			func(i,$(this).find("td"));

		});

	}
});



関連する記事

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





posted by lightbox at 2017-10-29 14:03 | Comment(0) | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

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

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