tablo> tbody> tr> td> div> tablo yeniden boyutlandırmadan geçiş alanı ve metin kutusu mu?

Question

Yapmaya çalıştığım bu kontrole sahibim. Bir web sitesi için yerinde bir metin düzenleyicisidir ve temel fikir bazı metinlerle bir etiket göstermesidir ve metni tıklattığınızda etiket kaybolur ve kullanıcının yerinde bir metin kutusu görünür, böylece kullanıcı düzenleyebilir veri.

genel yerleşim (netlik için kaldırılmıştır kimliklerini ve olayları) böyle bir şey geçerli:

<table> 
    <tbody> 
    <tr> 
     <td> 
     Some other cell, etc. 
     </td> 
     <td> 
     <div> 
      <span>When you click me, I'll disappear and show the input instead.</span> 
      <input type="textbox" style="display:none"/> 
     </div> 
     </td> 
    <tr> 
    </tbody> 
</table> 

Yani sorundur, bu kurulum oldukça telaşlı ve yayılma kaybolduğunda hücrelerini boyutlandırır ve giriş gösterir . Genel amacım, bu şeyi hala devam ettirmek için div, span ve/veya input üzerinde bazı CSS ayarlayabilmektir. Pozisyonda az miktarda şans vardı: mutlak olarak div üzerinde, ancak metin sadece sınırlarını aşar ve hücre içinde düzgün bir şekilde sarılmaz.

Bu bir kontrol olduğu için, bu üç öğeyi gerektiği gibi taşıyabilir veya başka öğeler ekleyebilirim, ancak tabloyu, tdc'yi, tr ve td etiketlerini tek başına bırakmak isterim.

Herhangi bir fikrin var mı?

Düzenleme: şöyle bir tık olay işleyicisi ile

.inPlaceEditor 
{ 
    margin-right:0px; 
    margin-left:0px; 
    margin-top:0px; 
    margin-bottom:0px; 
    white-space:normal; 
    display:block; 
    width:100%; 
    height:100%; 
} 

.inPlaceEditor span 
{ 
    white-space:normal; 
} 

.inPlaceEditor input[type="textbox"] 
{ 
    display:none; 
    width:100%; 
    border:solid 0px black; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding-bottom:0px; 
    padding-top:0px; 
    padding-left:0px; 
} 

:

function ShowInPlaceTextEditor(_this) { 
    var div = $(_this).closest('td'); 
    div.css({ height: div.height(), width: div.width() }); 
    $(_this).hide().next().show().focus().selectAllText(); 
} 

Ve ilişkili bir işleyici Sonunda

, böyle bir şey vardı Bu, şu gibi görünen metin kutusunu gizler:

function HideInPlaceTextEditor(_this) { 
    $(_this).closest('td').css('height', ''); 
    $(_this).hide().prev().html($(_this).val() == '' ? $(_this).closest('div').attr('emptyText') : $(_this).val()).show(); 
} 

Yardım eden herkese teşekkürler.

Answer 1

Javascript'e güvenebilirseniz, o hücredeki her şeyin etrafına bir div yazın. Sayfa yüklendiğinde, oluşturulduğu sırada o divanın mevcut yüksekliğini alın. Ardından, bu yüksekliği div olarak stillere atayın. Bu şekilde, girişi görüntülediğinizde, yine de ona atanan yükseklikteki div tarafından açılmalı. Girişin metinle olan açıklıktan biraz daha uzun olduğundan şüphelenirim, bu yüzden bu yüksekliği birkaç piksele çarpmanız gerekebilir.

Answer 2

div veya td öğesinin genişliğini/yüksekliğini ayarlamayla ilgili bir sorun mu var? Konumlandırma ile uğraşmayın. Ben genişleyen hücreler önlemek bilmek tek yolu bu kullanmaktır

Answer 3

...

table { table-layout: fixed; width: 500px; } 
table td { overflow:hidden; } 

ilginç bir girişimde div nispeten konumlandırılmış olun ve sonra mutlak olarak girişini ayarlamak olacaktır rağmen. ..

td div { position: relative; } 
td div input { position: absolute; } 

kesinlikle konuma elemanlar şişmesine neden olmayan ve başlangıç ​​konumunda, birinci, nispeten konuma ana dayanır.

Answer 4

Metni gizleyen ve metinleri görüntüleyen işlev sırasında, hücrenin boyutlarını algılayabilir ve metin kutusunu eşleşecek şekilde yeniden boyutlandırabilirsiniz.Eğer çok kutusu için maksimum genişlik ayarlamak isteyebilirsiniz böylece Tabii

<div> 
    <span onclick="flip(this,'box1')">When you click me, I'll disappear and show the input instead.</span> 
    <input id='box1' type="textbox" style="display:none"/> 
</div> 

<script> 
    function flip(text, boxID) 
    { 
    var box = document.getElementById(boxID); 
    var parent = text.off 
    box.style.width = text.offsetParent.offsetWidth + "px"; 

    text.style.display = "none"; 
    box.style.display = ""; 
    } 
</script> 

, metin bir satırda tek başına oturuyor, eğer, tam konteyner genişliğine boyutuna getirir.

Ve tabii

, bir TextBox yerine bir TextArea kullanmak isterseniz, koku alır & (sırasıyla .height & .offsetHeight ile birlikte) gibi easilly Yükseklik ayarlayın.

İyi şanslar!