nicht angemeldet
Tabelle / DIV und dynamische Inhalt ändern
Hallo.
Folgendes Szenario: In einer Tabelle habe ich ein Select Element welches unterschiedliche Werte zur Auswahl bringt (logisch). Nun soll mittels
<select ... onChange="describe(document.choice.tablename.value)">
eine JavaScript Funktion aufgerufen werden, die dynamisch den Wert einer Tabellenzelle (<td>...</td>) ändert. Der neue Wert ist ein Beschreibungstext für den selektierten Wert.
Das Ändern des Wertes in der Tabelle funktioniert auch, nur dass im Mozilla das <td>...</td> den neuen Text nicht umbricht, sondern die Tabelle ständig die Breite ändert bzw. der neue Text über die Tabellenzelle hinausragt.
Wie muss ich den Text "richtig" ändern, damit die Zelle die Breite behält?
PS: Wenn ich anstelle des td ein DIV ausserhalb der Tabelle verwende, dann klappt's wo wie erwartet - nur innerhalb der table geht's nicht :-(
Code:
function describe(table) {
switch(table) {
case "Wert1":
if (document.all) {
// IE funktioniert wie erwartet...
document.all.description.innerHTML ="Ein superlanger Beschreibungstext, der im original viel länger ist";
} else {
// mozilla variante, die "zappelt"
var div = document.getElementById("description");
div.innerHTML="Ein superlanger Beschreibungstext, der im original viel länger ist";
}
break;
// ..and so on for all values...
}
}
HTML:
<form name="choice" action="edit">
<table align="center"
style="table-layout:fixed;
width:570px;
background-color:#C0B2D2;">
<tr class="blank">
<td class="blank" style="width:555px">
<div style="font-size:11pt;margin:5px">
Please select the table you want to edit and click
on "go!".
</div>
</td></tr>
<tr class="blank">
<td class="blank" style="width555px;
padding-left:8px;
padding-bottom:5px">
<select style="width:500px" name="tablename" size="1"
onChange="describe(document.choice.tablename.value)">
<option value="Wert1">Laber1</option>
<option value="Wert2">Laber2</option>
<option value="Wert3">Laber3</option>
</select>
 
<div class="button"
onClick="document.forms[0].submit()">go!</div>
</td></tr>
<tr class="blank">
<td id="description" class="blank"
style="width:555px; height:120px;
background-color:#a3b3c7;
padding:5px; margin:5px; font-size:11pt">
  <!-- Zu beginn leer -->
</td>
</tr>
</table>
BTW: Wie bekomme ich ein table align="center" mittels CSS hin?
Grüße
Martin.
-
Hallo Martin,
Wie muss ich den Text "richtig" ändern, damit die Zelle die Breite behält?
Hast du schon mal das probiert?
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#max_width
HTML:
<form name="choice" action="edit">
<table align="center"
style="table-layout:fixed;
width:570px;max-width:570px;
min-width:570px;
text-align:center;background-color:#C0B2D2;">
<tr class="blank">
<td class="blank" style="width:555px">
<div style="font-size:11pt;margin:5px">
Please select the table you want to edit and click
on "go!".
</div>
</td></tr>
<tr class="blank">
<td class="blank" style="width555px;
padding-left:8px;
padding-bottom:5px">
<select style="width:500px" name="tablename" size="1"
onChange="describe(document.choice.tablename.value)"><option value="Wert1">Laber1</option>
<option value="Wert2">Laber2</option>
<option value="Wert3">Laber3</option>
</select>
 
<div class="button"
onClick="document.forms[0].submit()">go!</div>
</td></tr>
<tr class="blank">
<td id="description" class="blank"
style="width:555px; height:120px;max-width:555px;
min-width:555px;background-color:#a3b3c7;
padding:5px; margin:5px; font-size:11pt">
  <!-- Zu beginn leer -->
</td>
</tr>
</table>Gruß Gernot
-
Hallo Gernot.
Wie muss ich den Text "richtig" ändern, damit die Zelle die Breite behält?
Hast du schon mal das probiert?
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#max_widthDanke für den Hinweis. Jetzt bleibt zwar die table (bzw. das entsprechende td) fest in der Breite, der neu eingefügte Text wird aber immer noch nicht umgebrochen. Er ragt nun ziemlich unkoordiniert über die Tabelle hinaus.
Ich habe ein wenig herumgespielt und herausgefunden, dass es an der Tabelle selbst liegt.
Die an zu zeigenden Informationen werden nun in ein DIV gepackt, welches ich unter die table gepackt habe. Wenn ich die Texte in die DIV packe und ändere, so ändert sich die breite des DIVs nicht und der Text wird wie gewünscht auf der Breite des DIVs umgebrochen.
Ich glaube ich werde die restliche Tabelle auch noch entfernen...
Danke trotzdem für den Tipp.
Grüße
Martin.
-