入力画面から入力項目を受け取り、以下の形で確認画面で表示しています。
html
1<tr><!-- 受付番号 --> 2<td>※</td> 3<td>受付番号</td> 4<td><input type="text" name="gloup" id="gloup" placeholder="グループ入力">-<input type="text" name="param()" id="No" readonly="readonly"></td> 5</tr> 6<tr><!-- 発行番号 --> 7 <td>※</td> 8 <td>発行番号</td> 9 <td></td> 10</tr> 11<tr><!-- 受付回数 --> 12 <td>1</td> 13 <td>受付回数</td> 14 <td></td> 15</tr> 16<tr><!-- 氏名 --> 17 <td>2</td> 18 <td>氏名</td> 19 <td></td> 20</tr> 21<tr><!-- フリガナ --> 22 <td>3</td> 23 <td>フリガナ</td> 24 <td></td> 25</tr>
上記を以下のjsで修正しようとすると、すべて修正はできますが、受付番号の要素などはうまく処理ができてないです。
上記にように<td>統一でされているものを特定の要素のみ編集できるようにするにはどうすればよいのでしょうか。
JS
1<script type="text/javascript"> 2 3jQuery(function($){ 4 $('td').click(function(){ 5 //classでonを持っているかチェック 6 if(!$(this).hasClass('on')){ 7 //編集可能時はclassでonをつける 8 $(this).addClass('on'); 9 var txt = $(this).text(); 10 //テキストをinputのvalueに入れてで置き換え 11 $(this).html('<input type="text" value="'+txt+'" />'); 12 //同時にinputにフォーカスをする 13 $('td > input').focus().blur(function(){ 14 var inputVal = $(this).val(); 15 //もし空欄だったら空欄にする前の内容に戻す 16 if(inputVal===''){ 17 inputVal = this.defaultValue; 18 }; 19 //編集が終わったらtextで置き換える 20 $(this).parent().removeClass('on').text(inputVal); 21 }); 22 }; 23 }); 24});
あなたの回答
tips
プレビュー