59136


jQueryを使って、inputをクリックすることでinputのテキストを修正できるようにしました。  
テキストを編集するようにはできたのですが、

編集できるテキストをわかりやすくするために、`<td>`内に、  
icon(`<i class="fa fa-pencil>`)をつけたのですが、  
編集後、icon部分が表示されなくなってしまいます。

編集テキスト後またはテキスト編集しなかった場合に、  
再度icon(`<i class="fa fa-pencil>`)を表示させるにはどのようにしたらよいのでしょうか？

jQuery初心者のため、わかりにくい記述の部分があるかと思いますが、  
何卒ご教授のほどよろしくお願いいたします。

なお、スニペットで実行したところ、テキスト編集前の状態でも、`<i class="fa fa-pencil>`が  
表示されていませんが、実際には、鉛筆アイコンが表示されます。  
編集実効後に鉛筆アイコンが表示されなくなってしまいます。

[code]

    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);
          });
        };
      });
    });
[/code]

[code]

    .input_edit:hover {
      background-color:#26a69a;
      opacity: 0.5;
      transition: all  0.5s ease;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-09-18T06:49:14.423
59135
2019-09-18T07:21:45.387
2019-09-18T07:21:45.387
32986
35901
question
jquery
inputのテキスト編集後、<td>内に指定したアイコンを再度表示させる方法


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

[code]

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

[code]

    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>`);
          });
        };
      });
    });
[/code]

[code]

    .input_edit:hover {
      background-color: #26a69a;
      opacity: 0.5;
      transition: all 0.5s ease;
    }
[/code]

[code]

    <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>
[/code]

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

[code]

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

[code]

    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);
          });
        };
      });
    });
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-09-18T07:13:05.200
59136
2019-09-18T07:13:05.200
32986
59135
answer