1

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>

1 件の回答 1

0

td 要素内にテキストを挿入するとき、 i 要素も同時に挿入するか、

$(this).parent().removeClass('on').text(inputVal).append(`<i class="fa fa-pencil pull-right"></i>`);

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).append(`<i class="fa fa-pencil pull-right"></i>`);
      });
    };
  });
});
.input_edit:hover {
  background-color: #26a69a;
  opacity: 0.5;
  transition: all 0.5s ease;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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>

after 擬似要素を使用することで、質問者さんの実現したいことが行なえます。

.input_edit:not(.on)::after {
  display: inline-block;
  content: "\f040";
  font-family: "FontAwesome";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

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;
}

.input_edit:not(.on)::after {
  display: inline-block;
  content: "\f040";
  font-family: "FontAwesome";
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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
        </td>
        <td class="input_edit">
          bbb
        </td>
      </tr>
    </tbody>
  </table>
</div>

2
  • 2パターンやり方があるのですね。どちらも実行することができました。大変勉強になりました。ありがとうございます! Commented 2019年9月18日 7:21
  • やり方がわかっておらずすみませんでした!ご指摘いただきありがとうございます。 Commented 2019年9月18日 7:30

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。