一覧用・行編集フォーム

RowEditK.jsを使うとテーブル行の値を、入力フォームに表示できる。
入力フォームは子画面方式である。
テーブル行だけとかぎらず、データ構造がエンティティであれば、入力フォームの表示が可能である。
RowEditK.js

サンプル1

id	val1	text1
1	1	ライオン
2	2	シマウマ

HTML

	<div id="row_edit_k_form" >
		ID:<input type="text" class="id" value="" /><br>
		値1:
		<select class="val1">
			<option value="1">A1</option>
			<option value="2">A2</option>
		</select><br>
		<div>テキスト1:<input type="text" class="text1" value="" /></div>
	</div>
	
	<table >
		<thead>
			<tr><th>id</th><th>val1</th><th>text1</th><th></th></tr>
		</thead>
		<tbody>
			<tr>
				<td class="id">1</td>
				<td class="val1">1</td>
				<td class="text1">neko</td>
				<td> <input type="button" onclick="rowEditK('tr',this)" value="編集" /></td>
			</tr>

			<tr>
				<td class="id">2</td>
				<td class="val1">2</td>
				<td class="text1">kani</td>
				<td> <input type="button" onclick="rowEditK('tr',this)" value="編集" /></td>
			</tr>

		</tbody>
	</table>

JavaScript

rowEditK_Init();

使い方

JavaScript

RowEditK.jsを読み込み、rowEditK_Init()を実行するだけです。

<script src="RowEditK.js"></script>

	$( function() {
		
		rowEditK_Init();
		
	});

入力フォームに独自のCSSを適用することができます。

	rowEditK_Init({
		css:{'background-color':'#d6eaed';'font-size':'16px'}
	});

HTML

HTMLの構造は「入力フォーム要素」と「データ要素」からなります。

入力フォーム要素

入力フォーム要素は入力項目からなる子画面です。

入力フォーム要素には「id="row_edit_k_form"」属性を追加します。

	<div id="row_edit_k_form" >
		<input type="text" class="text1" value="" />
		<select class="val1">
			<option value="1">A1</option>
			<option value="2">A2</option>
		</select><br>
	</div>

データ要素

データ要素はエンティティ型の構造をしている必要があります。
例えば、テーブル要素<table>の行要素<tr>などです。
（他の例はサンプル2を参考にしてください）

入力フォームとデータ要素の関連付け

入力フォームとデータ要素はclass属性名で関連付けられています。
下記のサンプルの場合、class属性名「text1」を入力フォーム要素とデータ要素の両方に記述することにより、２つを関連づけています。
編集ボタンを押すと、データ要素のtext1が入力フォームのtext1に表示されます。

入力フォーム要素

	<div id="row_edit_k_form" >
		<input type="text" class="text1" value="" />
	</div>

データ要素

	<table>
			<tr>
				<td class="text1">ライオン</td>
				・・・略・・・
				
				<td><input type="button" onclick="rowEditK('tr',this)" value="編集" /></td>
			</tr>
	</table>

class属性に複数のセレクタを定義している場合

class属性に複数のセレクタが定義されいる場合、先頭のセレクタが関連づけに利用されます。
下記のようにclass属性にtext1,hoge,xxxが定義されている場合、先頭のtext1が関連づけの対象になります。

<input type="text" class="text1 hoge xxx" value="" />

入力フォームを表示するボタン

データ要素内に入力フォームを表示するボタンが必要です。
ボタンにはrowEditK関数の呼び出しを記述します。
rowEditK関数の第一引数には、データ部分をまとめる親要素セレクタを指定します。<table>系のデータ要素なら「tr」が該当します。第二引数は「this」を指定します。

	<table>
			<tr>
				<td class="text1">ライオン</td>
				・・・略・・・
				
				<td><input type="button" onclick="rowEditK('tr',this)" value="編集" /></td>
			</tr>
	</table>

サンプル2

2016-6-16

ID:
値1:

テキスト1:

HTML

	<!-- 入力フォーム要素 -->
	<div id="row_edit_k_form" >
		ID:<input type="text" class="id xx yy" value="" /><br>
		値1:
		<select class="val1">
			<option value="1">A1</option>
			<option value="2">A2</option>
		</select><br>
		<div>テキスト1:<input type="text" class="text1" value="" /></div>
	</div>
	
	<!-- データ要素 -->
	<div id="sample2">
		<input type="hidden" class="id" value="99" />
		<div>
			<div>
				<div class="val1">99</div>
			</div>
		</div>
		<span class=text1>aa</span>
		<div class="test_date">2016-6-16</div>
		<input type="button" onclick="rowEditK('#sample2',this)" value="編集" />
		
	</div>
	<br>

サンプル1ではデータ要素にtableを使用していましたが、サンプル2ではdiv要素を使用してます。
この場合、編集ボタンのrowEditK関数はサンプル1と異なる使い方になります。
rowEditK関数の第一引き数にデータ要素のセレクタを親要素として指定しています。

他のサンプル

一覧用・行編集フォーム | RowEditK.js

サンプル1

使い方

サンプル2