親の外にテキストエリアを展開する

Question

私は、編集するためにセルをダブルクリックしたいテーブルがあります。実際の表のセルの最初の数文字だけを表示していますが、textarea要素内でダブルクリックしてフルテキストを表示/編集したいと思います。

textarea要素は、表のセルがdoubleclickされるまで隠されたままになり、再度隠れるとblur（）イベントまで表のセルの上に表示されます。これを行うより良い方法がある場合は、私に知らせてください。

$(function() { 
 
    $('td.nota').dblclick(function (e) { 
 
     e.stopPropagation();  //stop the propagation of the event here 
 
     $(this).children().css("display","block"); 
 
     $(this).children().focus(); 
 
     //alert('test'); 
 
    }); 
 
}); 
 

 
$('td.nota').children().blur(function(){ 
 
$(this).css("display","none"); 
 
});

body { 
 
    margin: 50px 25px; 
 
} 
 

 
table { 
 
    width: auto !important; 
 
} 
 

 
.edit-box { 
 
display:none; 
 
float: left; 
 
margin-left: -8px; 
 
margin-top: -28px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="table-responsive"> 
 
    <table class="table table-bordered table-hover"> 
 
     <tbody> 
 
     <tr> 
 
      <td class="text-center"><input type="checkbox" name="selected[]" value="761"> 
 
      </td> 
 
      <td class="text-left nota" id="761" style="max-width: 20ch;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">Lorem ipsum dolor sit amet, consectetur adipiscing elit<textarea class="edit-box" rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</textarea></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="text-center"><input type="checkbox" name="selected[]" value="760"> 
 
      </td> 
 
      <td class="text-left nota" id="760" style="max-width: 20ch;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">Lorem ipsum dolor sit amet, consectetur adipiscing elit<textarea class="edit-box" rows="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</textarea></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

このフィドルで

同じコード：https://jsfiddle.net/prxbl/1hw2f0b9/29/

現在の問題：

1. textarea要素がテーブルを壊すことなく、すべてのものの上に、親TDを超えて展開する必要がありますがレイアウト。
2. Textarea要素は透明であってはなりません。要素を隠すはずです。

これらの問題を解決するための助けがあれば幸いです。

Answer 1

問題1と2の両方は、「position：absolute;」を追加することで解決できます。 CSSの.edit-boxをクラス化するtextarea要素は、親コンテナの外側に展開できます。