Textareaタグを使用した編集可能なテーブルセル

Question

jQueryを使用して編集可能なテーブルを作成しようとしています。

HTML下のコードを参照してください

<tr> 
     <td>1</td> 
     <td>11.11.2017</td> 
     <td><span class="editable-cell">11-00</span></td> 
     <td><span class="editable-cell">Проведение контрольных процедур</span></td> 
     <td><span class="editable-cell">Выкзд МВК в рамках задачи 56987</span></td> 
     <td><span class="editable-cell">17 км</span></td> 
     <td>53,31</td> 
    </tr> 

表のセルにユーザーのクリックは、textareaタグは、このセルに表示され、彼はテキストに

を編集してみましょうjQueryの

$('.editable-cell').mousedown(function(event){ 

     var oldValue = ""; 
     var newValue = ""; 

     oldValue = $(this).text(); 
     $(this).text(""); 
     $(this).append('<textarea id="edit-area" rows="5" cols="50">'); 
     $(this).append('</textarea>'); 
     $("#edit-area").val(oldValue); 
     $("#edit-area").focus(); 

     return false; 
     }); 

Iこれにこだわって助けが必要です。 1.セルをクリックすると、textareaが表示され、spanのテキストが表示されます。 Textareaのテキストのある場所にカーソルをマウスで設定しようとすると、カーソルは常に文字列の先頭に表示されます。 Textareaのテキストのどの部分にカーソルを置くことができますか？ 2.テーブルまたはウィンドウの任意の場所で別のスパンをクリックすると、古いTextareaが閉じられます。私はTextareaの外でマウスのクリックをキャッチする方法は？

Answer 1

問題は、テーブルセルではなくスパンにテキストエリアを追加することです。 APPENDが