jQueryを使って、inputをクリックすることでinputのテキストを修正できるようにしました。
テキストを編集するようにはできたのですが、
編集できるテキストをわかりやすくするために、<td>
内に、
icon(<i class="fa fa-pencil>
)をつけたのですが、
編集後、icon部分が表示されなくなってしまいます。
編集テキスト後またはテキスト編集しなかった場合に、
再度icon(<i class="fa fa-pencil>
)を表示させるにはどのようにしたらよいのでしょうか?
jQuery初心者のため、わかりにくい記述の部分があるかと思いますが、
何卒ご教授のほどよろしくお願いいたします。
なお、スニペットで実行したところ、テキスト編集前の状態でも、<i class="fa fa-pencil>
が
表示されていませんが、実際には、鉛筆アイコンが表示されます。
編集実効後に鉛筆アイコンが表示されなくなってしまいます。
jQuery(function($){
$('.input_edit').click(function(){
//classでonを持っているかチェック
if(!$(this).hasClass('on')){
//編集可能時はclassでonをつける
$(this).addClass('on');
var txt = $(this).text();
//テキストをinputのvalueに入れて置き換え
$(this).html('<input type="text" value="'+txt+'" />');
//同時にinputにフォーカスをする
$('.input_edit > input').focus().blur(function(){
var inputVal = $(this).val();
//もし空欄だったら空欄にする前の内容に戻す
if(inputVal===''){
inputVal = this.defaultValue;
};
//編集が終わったらtextで置き換える
$(this).parent().removeClass('on').text(inputVal);
});
};
});
});
.input_edit:hover {
background-color:#26a69a;
opacity: 0.5;
transition: all 0.5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="box-body">
<table class="table table-bordered dataTable table-list screen_width">
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td class="input_edit">
aaa
<i class="fa fa-pencil pull-right">
</i>
</td>
<td class="input_edit">
bbb
<i class="fa fa-pencil pull-right">
</i>
</td>
</tr>
</tbody>
</table>
</div>