jquery - jQuery - td の内容を定義済みの要素に置き換える

Question

.appendTo()のように動作するが、追加する代わりにコンテンツを置き換え、replacer を jQuery オブジェクトとして保持する関数はありますか? はhtml()要素をオブジェクトとして保持せず、単純に html に変換します。

問題は、表のセルを動的に編集できるようにしたいということです。したがって、ユーザーが td をホバーすると、鉛筆の付いたボタンが表示され、クリックすると、セルの内容が入力ボックスに入れられ、その入力に置き換えられます。

手順は簡単ですが、入力に切り替えるとセルサイズが小さくなってしまうのでテーブル全体をリサイズするのが面倒です。を使用html()すると修正さblurれますが、イベントが台無しになり、オートフォーカスや入力ボックスでのテキストの選択が失われます。

それは次のようなものです：

<script>
    var parent = $(this).parent();
    var old = $(parent).html();
    var input = $('<input type="text"/>').val($(parent).text()).attr('rel',old);

    //--- would like to combine lines below ---//

    $(parent).html(''); <-- this resizes table cell
    $(input).appendTo($(parent)).focus().select(); //<-- this is important thing.
</script>

入力幅は 100% に設定されます。

もちろん、それを使用する$(parent).html($(input).focus().select());と、テーブルセルのサイズは変更されませんが、ノードがまだドキュメントにないため、テキストにフォーカスしたり選択したりすることはありません。

最初に入力を追加してから古いコンテンツを削除するのは、テーブル セルのサイズが大きくなるため、お勧めできません。

それは私が言いたいことではないので、言及しないでくださいreplaceWidth()！

表のセルはできるだけ小さくするように言及されているため、次のようになります。

td{
   width:1px;
   padding:5px;
   white-space:nowrap;
}

max-width は を含むテーブル セルでは機能しないためnowrap、コンテンツは、コンテンツのサイズを 150px に制限する div に配置されます。

.td_limiter{
   max-width:150px;
   overflow:hidden;
   text-overflow:ellipsis;
}