Der folgende Beitrag wurde am 30. 07. 2007, 13:01 Uhr von manni veröffentlicht.
Hi Freunde!
Ich krieg 'ne Kriese!
Wie kann man in einer Tabelle per JavaScript die Breite einer Spalte beeinflussen?
td.offsetWidth geht nicht, td.style.width geht nicht, td.width geht schon garnicht, aber wie geht's denn?
Viele Grüße
Der folgende Beitrag wurde am 30. 07. 2007, 13:21 Uhr von floater veröffentlicht.
Hallo,
> Wie kann man in einer Tabelle per JavaScript die Breite einer Spalte beeinflussen?
> td.offsetWidth geht nicht, td.style.width geht nicht, td.width geht schon garnicht, aber wie geht's denn?
Probiere es doch mal mit
window.document.getElementsByTagName("td").style.width="200px";
Gruß,
Floater
Der folgende Beitrag wurde am 30. 07. 2007, 13:27 Uhr von manni veröffentlicht.
Hi!
> Probiere es doch mal mit
> window.document.getElementsByTagName("td").style.width="200px";
Das ist ja gerade mein Problem, das das eben nicht geht. Die Spalte reagiert darauf nicht.
Viele Grüße
Der folgende Beitrag wurde am 30. 07. 2007, 14:18 Uhr von Gunnar Bittersmann veröffentlicht.
Hello out there!
> Das ist ja gerade mein Problem, das das eben nicht geht.
„Geht nicht“ gibt’s nicht.
Es gibt aber Tipps für Fragende.
See ya up the road,
Gunnar
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
Der folgende Beitrag wurde am 30. 07. 2007, 14:30 Uhr von manni veröffentlicht.
> Es gibt aber Tipps für Fragende
Was soll das?
1. Das Problem wurde von mir erklärt
2. Ich habe bereits geschildert, was _nicht_ geht. Zitat:
> td.offsetWidth geht nicht, td.style.width geht nicht, td.width geht schon garnicht, aber wie geht's denn?
Worauf spielst Du an?
Der folgende Beitrag wurde am 30. 07. 2007, 14:45 Uhr von Siechfred veröffentlicht.
> 2. Ich habe bereits geschildert, was _nicht_ geht. Zitat:
> > td.offsetWidth geht nicht, td.style.width geht nicht, td.width geht schon garnicht, aber wie geht's denn?
> Worauf spielst Du an?
Wirft der Browser eine Fehlermeldung? Wenn ja, wie lautet die? Wie holst du dir die Referenz auf 'td', wie sieht der entsprechende Code aus? Am Rande: getElementsByTagName ergibt eine *Collection* der passenden Elemente. Willst du ein einzelnes davon ansprechen, musst du das auch schreiben: getElementsByTagName('td')[nr], wobei 'nr' die Indexnummer der gesuchten Zelle ist.
Siechfred
--
Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.
Der folgende Beitrag wurde am 30. 07. 2007, 15:05 Uhr von manni veröffentlicht.
Das Problem reduziert sich wirklich nur darauf, der Spalte einer Tabelle eine Breite zuzuweisen.
Im Detail: Ich will eine Tabelle mit feststehendem Kopf erstellen.
Vollständiger Quelltext:
<html>
<body onload="los();">
<script>
function tabscroll() {
document.getElementById('divhead').scrollLeft=document.getElementById('divbody').scrollLeft;
}
function los() {
for (i=1;i<3;i++;) {
h=document.getElementById("col"+i+"head");
b=document.getElementById("col"+i+"body");
if (h.offsetWidth>b.offsetWidth) {
b.style.width=h.offsetWidth;
} else {
h.style.width=b.offsetWidth;
}
}
}
</script>
<!-- Haupt-DIV die die gesamte Tabelle enthält Scrollen: Nein -->
<div style="width:200px;height:200px;overflow:hidden;">
<!-- Kopf-DIV die nur den Kopftext enthält Scrollen: Nein -->
<div id="divhead" style="height:18px;position:relative;overflow:hidden;"}>
<table cellpadding="0" cellspacing="0" border="0">
<tr height:18px">
<td valign="top" id="col1head">Spalte 1</td>
<td valign="top" id="col2head">Spalte 2</td>
</tr>
</table>
</div>
<!-- Rumpf-DIV die nur die Daten enthält Scrollen: Ja -->
<div id="divbody" style="width:200px;height:184px;position:relative;overflow:scroll;" onscroll="tabscroll();">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="col1body">Spalte_1_mit_langem_Inhalt</td>
<td id="col2body">Spalte_2</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Idee:
Eine große div in der zwei kleine sind.
Die große div legt nur die darstellbare Größe der Tabelle fest,
Die erste kleine "divhead" zeigt eine Tabelle mit der Kopfzeile.
Die zweite kleine "divbody" zeigt die Rumpfdaten.
Wird die Rumpf-div gescrollt, sorgt die Funktion rabscroll für identisch Scrollpositionen der beiden divs.
Das Problem: Die Breite der Spalten in den Tabellen ist nicht identisch. Daher die Funktion "los", die bei onload ausgelöst wird.
Sie soll alle Spalten durchgehen und die Breiten jeweils anpassen.
Entscheidend hierfür ist, dass die breitere der beiden Spalten festlegt, welche Breite gesetzt wird.
Ich wollte das eigentlich nicht so kompliziert machen.
Es gibt keine Fehlermeldung, ich hab nur irgendwo einen Gedankenfehler drin. Die Funktion los setzt die Breite der Spalten eben nicht. Aber warum?
Danke.
Der folgende Beitrag wurde am 30. 07. 2007, 15:26 Uhr von Gunnar Bittersmann veröffentlicht.
Hello out there!
> b.style.width=h.offsetWidth;
Was für einen Wert liefert 'offsetWidth'?
Was erwartet 'style.width' bzw. die CSS-Eigenschaft 'width'? [CSS2 §10.2]
See ya up the road,
Gunnar
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
Der folgende Beitrag wurde am 30. 07. 2007, 16:08 Uhr von manni veröffentlicht.
Sorry, hast Recht, "px" fehlte. Das passierte mir, weil ich schon 752 Versuche hatte und einfach einen davon rauspickte.
Auch beim i++ muss das Semikolon weg.
Aber auch das arbeitet noch nicht korrekt. Die Spaltenbreiten weichen noch immer voneinander ab.
Ich sehe drei Lösungsansätze, um einer td eine Breite zu verpassen:
1. td.width = wert + 'px'
2. td.style.width = wert + 'px'
3. td.offsetWidth = wert
Gibt es einen weiteren oder ist einer hiervon korrekt? Und wenn einer korrekt ist, wo ist dann mein Gedankenfehler?
Der folgende Beitrag wurde am 30. 07. 2007, 16:31 Uhr von Gunnar Bittersmann veröffentlicht.
Hello out there!
> 1. td.width = wert + 'px'
Damit gibst du dem 'td'-Objekt eine Eigenschaft 'width'. Dieso könnte auch 'husseldiguggeldu' heißen; für das Rendern hat diese keine Relevanz.
> 2. td.style.width = wert + 'px'
Aha. Wenn 'td' das richtige Objekt ist, sollte es gehen.
> 3. td.offsetWidth = wert
Ist offsetWidth denn schreibbar?
See ya up the road,
Gunnar
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
Der folgende Beitrag wurde am 30. 07. 2007, 16:38 Uhr von manni veröffentlicht.
> > 1. td.width = wert + 'px'
»»Damit gibst du dem 'td'-Objekt eine Eigenschaft 'width'. Dieso könnte auch 'husseldiguggeldu' heißen; für das Rendern hat diese keine Relevanz.
Stimmt nicht. Es funktioniert identisch wie style.width
> > 2. td.style.width = wert + 'px'
>
> Aha. Wenn 'td' das richtige Objekt ist, sollte es gehen.
Sollte...
> > 3. td.offsetWidth = wert
>
Leider nicht, entfällt also.
Die Versionen 1 und 2 arbeiten beide. Die Breite wird tatsächlich verändert, aber eben nicht auf den von mir angegebenen Wert, sondern irgendwie.
Ich gehe davon aus, dass dies mit der Breite der table zusammenhängt. Vermutlich ist td zwar gewillt, die Breite anzunehmen, table rechnet aber neu aus und verhindert somit eine pixelgenaue Anpassung.
Bin noch am testen.
Vielen Dank
Der folgende Beitrag wurde am 30. 07. 2007, 19:15 Uhr von Gunnar Bittersmann veröffentlicht.
Hello out there!
> > > 1. td.width = wert + 'px'
> »»Damit gibst du dem 'td'-Objekt eine Eigenschaft 'width'. Dieso könnte auch 'husseldiguggeldu' heißen; für das Rendern hat diese keine Relevanz.
> Stimmt nicht.
Damit haste Recht. td.width = 42; ist das Äquivalent zu <td width="42">.
> Es funktioniert identisch wie style.width
Damit haste Unrecht. Bei der Angabe des HTML-Attributwerts steht nur eine Zahl, die als Angabe in Pixel interpretiert wird.
> Die Versionen 1 und 2 arbeiten beide. Die Breite wird tatsächlich verändert, aber eben nicht auf den von mir angegebenen Wert, sondern irgendwie.
> Ich gehe davon aus, dass dies mit der Breite der table zusammenhängt. Vermutlich ist td zwar gewillt, die Breite anzunehmen, table rechnet aber neu aus und verhindert somit eine pixelgenaue Anpassung.
Ich erinnere mich an ein ähnliches Problem. Nicht einmal durch table {table-layout: fixed} waren die Browser dazu zu bewegen, die Spalten so breit zu machen wie angegeben, wenn die Tabelle damit breiter als der Viewport gewesen wäre.
IIRC hatte ich die Tabelle in ein weiteres Element gepackt, dem ich eine hinreichend große Breite gegeben habe.
See ya up the road,
Gunnar
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
Der folgende Beitrag wurde am 30. 07. 2007, 15:07 Uhr von Gunnar Bittersmann veröffentlicht.
Hello out there!
> > Es gibt aber Tipps für Fragende
> Was soll das?
> 1. Das Problem wurde von mir erklärt
Nein.
Du hast ein Symptom der Krankheit genannt.
Um die Ursache zu ergründen, ist eine Diagnose erforderlich. Diese verhinderst du, da du nicht dein Hemd ausziehen willst, auch nicht den Mund aufmachst und „Aaaaaaahhhhhhh“ sagst.
See ya up the road,
Gunnar
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
Der folgende Beitrag wurde am 30. 07. 2007, 21:50 Uhr von Gernot Back veröffentlicht.
Hallo manni,
> Wie kann man in einer Tabelle per JavaScript die Breite einer Spalte beeinflussen?
Struppi hat das doch letzt mal demonstriert, auch wenn es in Opera nicht lief.
http://forum.de.selfhtml.org/archiv/2007/6/t154827/#m1009508
http://javascript.jstruebig.de/test/tabellen%20ziehen.html
Ich selbst habe mich in dem Thread mit einem anderen Ansatz (mit in die Zellen hineingeschachtelten DIV-Elementen versucht), aber auch bei mir machte Opera Probleme, indem er Spalten zwar per Drag'n Drop nach rechts verbreiterte, aber nicht nach links verkleinerte.
Aber dass sich da grundsätzlich auch bei Opera was machen lässt, sieht man da schon:
http://www.lernspielwiese.de/resizetablecolumn/
Vielleicht möchtest du ja auch gar nichts per Drag'n Drop manipulieren sondern anders.
Gruß Gernot
--
super me
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4