Metin dışındaki metni genişletme td

Question

Düzenlemek için hücreleri çift tıklayabileceğim bir masa var. Her ne kadar gerçek tablo hücresinde sadece ilk birkaç karakteri göstermeme rağmen, bir textarea öğesinin içinde çift tıklamayla tam metni göstermek/düzenlemek istiyorum.

Textarea öğesi, tablo hücresi iki kez seçilinceye kadar gizli kalacaktır, ardından tekrar gizlendiğinde blur() olayı görünene kadar tablo hücresinin üstünde görünür hale gelir. Bunu yapmanın daha iyi bir yolu varsa, lütfen bana bildirin.

$(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>

bu keman içinde aynı kodu: tabloyu bozmadan

1. Metin Alanı eleman şeyin üstüne, ebeveyn td ötesine genişletmek gerekir: https://jsfiddle.net/prxbl/1hw2f0b9/29/

   Güncel sorunlar düzeni.

2. Textarea öğesi saydam olmamalı, arkadaki öğeleri maskelemelidir.

Bu sorunların çözümünde herhangi bir yardım büyük önem taşır.

Answer 1

Sorun 1 ve 2'nin ikisi de "position: mutute;" ekleyerek çözülebilir. CSS'de sınıf .edit kutusuna. Şimdi textarea öğesi, ana kapsayıcı dışında genişletilebilir.