編集可能なセルの幅を復元するにはどうしたらいいですか？

Question

私は編集可能なセルを持っています。テーブルのセルをクリックするとセルの幅が広がりますが、セルを離れるとテーブルが通常の幅に戻るようにします。それ以外の場合は、€記号が価格から離れすぎるためです。あなたのclick機能でこれを入れて

// Editable Cells 
 

 
    $(document).on('click', '.editable', function(event) { 
 
      if ($(this).children("input").length > 0) 
 
       return false; 
 
      var tdObj = $(this); 
 
      var preText = tdObj.html(); 
 
      var inputObj = $("<input type='text' />"); 
 
      tdObj.html(""); 
 
      inputObj.width(tdObj.width()) 
 
       .height(tdObj.height()) 
 
       .css({ 
 
        border: "0px", 
 
        width: "30%", 
 
       }) 
 
       .val(preText) 
 
       .appendTo(tdObj) 
 
       .trigger("focus") 
 
       .trigger("select"); 
 
      inputObj.keyup(function (event) { 
 
       if (13 == event.which) { // press ENTER-key 
 
        var text = $(this).val(); 
 
        tdObj.html(text); 
 
       } else if (27 == event.which) { // press ESC-key 
 
        tdObj.html(preText); 
 
       } 
 
      }); 
 
      inputObj.click(function() { 
 
       return false; 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table style="width:100%"> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th >Price</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td><span class="editable">50</span> €</td> 
 
    <td>Smith</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td><span class="editable">50</span> €</td> 
 
    <td>Jackson</td> 
 
    </tr> 
 
</table>

Answer 1

：

inputObj.blur(function(event) { 
    tdObj.html(preText); 
}); 

コード：

$(document).on('click', '.editable', function(event) { 
    if ($(this).children("input").length > 0) 
     return false; 
    var tdObj = $(this); 
    var preText = tdObj.html(); 
    var inputObj = $("<input type='text' />"); 
    tdObj.html(""); 
    inputObj.width(tdObj.width()) 
     .height(tdObj.height()) 
     .css({ 
      border: "0px", 
      width: "30%", 
     }) 
     .val(preText) 
     .appendTo(tdObj) 
     .trigger("focus") 
     .trigger("select"); 
    inputObj.keyup(function (event) { 
     if (13 == event.which) { // press ENTER-key 
      var text = $(this).val(); 
      tdObj.html(text); 
     } else if (27 == event.which) { // press ESC-key 
      tdObj.html(preText); 
     } 
    }); 
    inputObj.blur(function(event) { 
     tdObj.html(preText); 
    }); 
    inputObj.click(function() { 
     return false; 
    }); 
});