Dynamische Spaltenbreite Tabelle JavaScript

robert712 · Mar 6th 2009, 9:16am

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 · Mar 6th 2009, 8:14pm

Das ist kein Problem mit JavaScript

Source Code

<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 · Mar 9th 2009, 7:34am

d0nut wrote:

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 · Mar 9th 2009, 8:19am

robert712 wrote:

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 · Mar 10th 2009, 9:42am

vince wrote:

robert712 wrote:

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:

Source Code

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

Source Code

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

Display All

vince · Mar 10th 2009, 10:50am

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 · Mar 10th 2009, 1:08pm

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

Dynamische Spaltenbreite Tabelle JavaScript

Dynamische Spaltenbreite Tabelle JavaScript

Source Code

d0nut wrote:

robert712 wrote:

vince wrote:

robert712 wrote:

Source Code

Source Code

Share

Tags