テーブルの 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, "ＭＳ Ｐゴシック", 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 で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
|
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
