tabelle> tbody> tr> td> div> toggled span und textbox ohne die tischgröße ändern?

Question

Also ich habe diese Kontrolle, die ich versuche zu machen. Es ist ein In-Place-Texteditor für eine Website, und die Grundidee ist, dass eine Beschriftung mit Text angezeigt wird. Wenn Sie auf den Text klicken, wird die Beschriftung ausgeblendet und an deren Stelle wird eine Textbox angezeigt, die der Benutzer bearbeiten kann die Daten.

Das allgemeine Layout ist so etwas wie dieses (ids und der Übersichtlichkeit halber entfernt Ereignisse):

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

Das Problem ist also, dieses Setup ziemlich pingelig ist und ändert die Größe der Zellen, wenn die Spanne verschwindet und der Eingang zeigt nach oben . Mein übergeordnetes Ziel ist es, einige CSS für div, span und/oder input zu setzen, um das Ding ruhig zu halten. Ich hatte eine kleine Portion Glück mit der Position: Absolut auf der Div, aber der Text überläuft einfach seine Grenzen und wickelt sich nicht richtig in der Zelle.

Da dies ein Steuerelement ist, kann ich diese drei Elemente nach Bedarf verschieben oder andere Elemente hinzufügen, aber ich möchte wirklich die Tabelle, tbody, tr und td-Tags allein lassen.

Irgendwelche Ideen?

Edit:

Am Ende hatte ich so etwas wie dieses:

.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; 
} 

Mit einem Klick Event-Handler, der wie folgt aussieht:

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

und einen zugehörigen Handler das verbirgt das Textfeld, das wie folgt aussieht:

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

Danke an alle, die geholfen haben.

Answer 1

Wenn Sie sich auf Javascript verlassen können, wickeln Sie ein div um alles in dieser Zelle. Wenn die Seite geladen wird, wird die aktuelle Höhe dieses Elements abgerufen, so wie es gerendert wurde. Dann weisen Sie diese Höhe dem Div in Styles zu. Wenn Sie die Eingabe anzeigen, sollte sie von diesem div immer mit der zugewiesenen Höhe geöffnet werden. Ich würde vermuten, dass die Eingabe etwas größer ist als die Spanne mit Text, daher müssen Sie diese Höhe möglicherweise um ein paar Pixel erhöhen.

Answer 2

Was ist mit der Einstellung der Breite/Höhe des Elements div oder td falsch? Verwechsle nicht mit der Positionierung.

Answer 3

Der einzige Weg, ich weiß, Zellen zu verhindern, erweitert diese zu verwenden ist ...

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

Obwohl ein interessanter Versuch wäre die div relativ positioniert zu machen, und dann die Eingabe als absolute gesetzt. ..

Absolut positionierte Elemente verursachen keine Expansion, und ihre Startposition basiert auf dem ersten relativ positionierten Elternelement.

Answer 4

Während der Funktion, die den Text ausblendet und den Textbereich anzeigt, können Sie nach den Abmessungen der Zelle suchen und die Größe des Textfelds anpassen.

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

Natürlich, wenn Sie Ihr Text auf einer Linie von selbst sitzt, wird es in voller Containerbreite Größe ändern, so dass Sie auch eine maximale Breite für die Box setzen möchten.

Und natürlich, wenn Sie eine TextArea anstelle einer TextBox verwenden möchten, können Sie schnüffeln & setzen Sie die Höhe so einfach (mit .Height & .offsetHeight, bzw.).

Viel Glück!