Dynamische Spaltenbreite Tabelle JavaScript

robert712 · 6. März 2009, 09:16

hallo,

gibts in javascript die möglichkeit, die spaltenbreite während der laufzeit anzupassen?

ich generiere mir eine tabelle mit zwei spalten und möchte hier dann die mittlere vertikale linie aendern. dadurch sollen sich eben meine spaltenbreiten mit ändern...

Torben Brodt · 6. März 2009, 20:14

Das ist kein Problem mit JavaScript

Quellcode

<table border="1">
<tr>
<td>easy</td>
<td id="foo"><a href="#" onclick="document.getElementById('foo').style.width = '300px';return false">coding</a></td>
</tr>
</table>

robert712 · 9. März 2009, 07:34

d0nut schrieb:

Das ist kein Problem mit JavaScript

Ne, des is zwar nich schlecht, aber noch nicht ganz das was ich suche... Ich will bei einer Tabelle mit zwei Spalten, dass sich beim drüberfahren mit der maus über die mittlere vertikale trennlinie der mauszeiger in der art ändert (soweit kein problem, onmouseover..) und dass ich nun mit der maus die spalten größer ziehen kann.

vince · 9. März 2009, 08:19

robert712 schrieb:

und dass ich nun mit der maus die spalten größer ziehen kann.

Das Zauberwort heisst "Resizable".

Der Einfachkeithalber würde ich dir dafür ein Framework vorschlagen.
z.B
jqueryui.com/demos/resizable/

Wobei ich nicht sagen kann, wie sich das bei einer Tabele verhält.

robert712 · 10. März 2009, 09:42

vince schrieb:

robert712 schrieb:

und dass ich nun mit der maus die spalten größer ziehen kann.

Das Zauberwort heisst "Resizable".

Der Einfachkeithalber würde ich dir dafür ein Framework vorschlagen.
z.B
jqueryui.com/demos/resizable/

Wobei ich nicht sagen kann, wie sich das bei einer Tabele verhält.

das ist zwar nicht schlecht, aber ich stelle mir folgendes vor:

Quellcode

<table id="resizeme" border="1" width="99%" height="400">
<tr>
<td id="vs_td1" width="getWidth('vs_td1')">11</td>
<td id="vs_td2" width="2%">22</td>
<td id="vs_td3" width="getWidth('vs_td3')">33</td>
</tr>
</table>

eine statische html-tabelle, bei der nur über das ereignis onmousedown und onmouseup das attribut width der spalte angepasst wird.... geht sowas?

Quellcode

<script type="text/javascript">
var width_td1, width_td2, width_td3;
width_td1 = '50px';
function getWidth( td_id )
{
obj = document.getElementByID(td_id)
obj.style.width = this.width_td1
return width_td1;
}
</script>

Alles anzeigen

vince · 10. März 2009, 10:50

Wenn du es nur in die Breite ziehen lassen möchtest, hast du eine Option "maxHeight" welche du fix setzen kannst, damit du die Tabelle nur in die Breite ziehen kannst.

Wenn du es selber machen möchtest, muss du erstmal überlegen was passiert und wie es passieren soll.

Heisst also, dass du einen Punkt hast, der auf ein onclick Event reagiert.
Wenn du diesen Punkt anklickst, kannst du das onmousemove Event solange abfragen bis das onmouseout Event eintritt.

Beim Abfragen von onmousemove müsstest du bei jeder Bewegung die X-Koordinaten abfragen und um die Differenz deine Tabelle oder Spalte mit einer Funktion vergrößern bzw. verkleinern.

robert712 · 10. März 2009, 13:08

Ich habs nun mittlerweile selbst gelöst. Wer will kann den Quellcode gern auszugsweise haben

Dynamische Spaltenbreite Tabelle JavaScript

Dynamische Spaltenbreite Tabelle JavaScript

Quellcode

d0nut schrieb:

robert712 schrieb:

vince schrieb:

robert712 schrieb:

Quellcode

Quellcode

Teilen

Tags