Heph: Breite einer Tabellenspalte verändern

SELF-Forum

Breite einer Tabellenspalte verändern

Heph
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte gerne mit Javascript die Breite einer Tabellenspalte durch Ziehen der Spaltenkante mit der Maus ändern können.
Da ich mit Javascript noch nicht sonderlich viel Erfahrung habe fehlt mir derzeit die Richtung wie es funktionieren könnte und zu welchen Sachen ich mich näher einlesen muss.
Ich habe schon einige Beispiele gefunden, allerdings funktionieren die alle mit CSS (http://gtalbot.org/DHTMLSection/ColumnResize.html).

Ich möchte gerne eine Funktion schreiben die man nachher auf eine normale Tabelle in HTML anwenden kann. Deshalb ist die Tabelle nicht im CSS definiert und ich vermute damit funktioniert es mit dem angegebenen Beispiel nicht mehr. Ich kann auch nicht einschätzen ob das CSS im Bsp essentiell ist oder ob man es so umbauen kann dass es für normale HTML Tabellen funktioniert ?

Vorgestellt hab ich mir es grob so:
Ich lese aus wo die Kanten in der Tabelle genau sind (falls das irgendwie geht?). Mit JS sollte ich die Mausposition in der Seite bestimmen können und dann auf das onMouseDown Event reagieren können. Beim mouseup event setzte ich dann die width der obersten Zelle neu.

Zuerst mal: Kann das so funktionieren oder gibt es eine einfachere Möglichkeit ?

Gruß
heph

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Breite einer Tabellenspalte verändern

    Heph
    – Informationen zu den Bewertungsregeln

    die Position der Kanten bekomm ich inzwischen raus (bei mouseover über zeller berechne ich die mausposition und schau den abstand zu den zellen daneben an).
    allerdings hab ich folgendes problem:

    so funktioniert der Aufruf bei mousemove:
    tabelleTd.setAttribute("onmousemove", "pruefeAbstand()");

    sowas hätte ich gerne:

    tabelleTd.setAttribute("onmousemove", "pruefeAbstand(tabelleId)");

    Ich brauche in der aufgerufenen Funktion die Id von wo der Event ausgelöst wurde und will der Funktion pruefeAbstand deshalb noch einen Parameter mitgeben, ich bekomms aber nicht hin.

    Hat mir dazu jemand einen Tipp ?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Breite einer Tabellenspalte verändern

      Struppi Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      so funktioniert der Aufruf bei mousemove:
      tabelleTd.setAttribute("onmousemove", "pruefeAbstand()");

      setAttribute ist hier überflüssig.

      tabelleTd.onmousemove = pruefeAbstand;

      funktioniert zuverlässiger.

      sowas hätte ich gerne:

      tabelleTd.setAttribute("onmousemove", "pruefeAbstand(tabelleId)");

      Ich brauche in der aufgerufenen Funktion die Id von wo der Event ausgelöst wurde und will der Funktion pruefeAbstand deshalb noch einen Parameter mitgeben, ich bekomms aber nicht hin.

      Wozu die ID in der Funktion ist this das Objekt wozu brauchst du die ID?

      Hat mir dazu jemand einen Tipp ?

      ich hatte mal einen Ansatz gemacht, ich würde die ganze Geschichte anders lösen. Wenn du den mouseover Event über die Tabelle legst, ist das Eventobjet in dem Moment wo du auf den Rahmen kommst TABLE d.h. dann kann man u.U. ziehen, der Rest ist rumrechnerei (was ich aber noch nicht gemacht habe)

      Um an alle notwenigen Infos des Events zu kommen hab ich hier mal eine Funktion geschrieben:

      function Mouse(e)  
{  
    if(!e) e = window.event;  
    var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?  
    window.document.documentElement : window.document.body || null;  
    var mouse = {  
 top: e.pageY  || (e.clientY + body.scrollTop ),  
 left: e.pageX || (e.clientX + body.scrollLeft),  
 clientX: e.clientX || (e.pageX - window.pageXOffset),  
 clientY: e.clientY || (e.pageY - window.pageYOffset),  
 type: e.type,  
 obj: (e.target  || e.srcElement)  
 };  
    if(mouse.obj &&  mouse.obj.nodeType == 3) mouse.obj = mouse.obj.parentNode;  
    return mouse;  
}

      Struppi.

      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. Breite einer Tabellenspalte verändern

        Heph
        – Informationen zu den Bewertungsregeln

        erstmal vielen Dank für deine Antwort!
        ich programmiere Javascript erst seit 2 Wochen, deshalb fehlen mir noch einige Grundlagen.

        setAttribute ist hier überflüssig.

        tabelleTd.onmousemove = pruefeAbstand;

        funktioniert zuverlässiger.

        danke, hab ich geändert.

        sowas hätte ich gerne:

        tabelleTd.setAttribute("onmousemove", "pruefeAbstand(tabelleId)");

        Ich brauche in der aufgerufenen Funktion die Id von wo der Event ausgelöst wurde und will der Funktion pruefeAbstand deshalb noch einen Parameter mitgeben, ich bekomms aber nicht hin.

        Wozu die ID in der Funktion ist this das Objekt wozu brauchst du die ID?

        ich habe mir das so gedacht, dass ich in pruefeAbstand mit getElementById die Zelle des Mouseoverevents bekomme. Dann wähle ich im Dom-Baum das Element davor und das danach (also die Zellen links und rechts) und schaue welchen Abstand der Cursor zu diesen Zellen hat. Dafür brauche ich die Id der Zelle des Mouse-events. Über this bekomme ich ein 'object window', kann ich damit irgendwie raus bekommen von wo das Event ausgelöst wurde ?

        Hat mir dazu jemand einen Tipp ?

        ich hatte mal einen Ansatz gemacht, ich würde die ganze Geschichte anders lösen. Wenn du den mouseover Event über die Tabelle legst, ist das Eventobjet in dem Moment wo du auf den Rahmen kommst TABLE d.h. dann kann man u.U. ziehen, der Rest ist rumrechnerei (was ich aber noch nicht gemacht habe)

        Um an alle notwenigen Infos des Events zu kommen hab ich hier mal eine Funktion geschrieben:

        function Mouse(e)

        {
            if(!e) e = window.event;
            var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
            window.document.documentElement : window.document.body || null;
            var mouse = {
        top: e.pageY  || (e.clientY + body.scrollTop ),
        left: e.pageX || (e.clientX + body.scrollLeft),
        clientX: e.clientX || (e.pageX - window.pageXOffset),
        clientY: e.clientY || (e.pageY - window.pageYOffset),
        type: e.type,
        obj: (e.target  || e.srcElement)
        };
            if(mouse.obj &&  mouse.obj.nodeType == 3) mouse.obj = mouse.obj.parentNode;
            return mouse;
        }

        
>   
> Struppi.  

danke für den Code, verstehe ihn aber beim ersten durchlesen nicht ganz, da muss ich noch ein paar Sachen nachschlagen.  
Da ich in meinen Ansatz jetzt doch schon einiges an Zeit gesteckt hab möchte ich versuchen ob ich es so hinbekomme, auch wenn ich mir sicher bin dein Ansatz ist deutlich eleganter ;)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Breite einer Tabellenspalte verändern

          Heph
          – Informationen zu den Bewertungsregeln

          ah, in der von dir geschriebenen Funktion gibt es ein mouse.obj
          das ist vermutlich genau das was ich brauche. wird eingebaut und getestet, nochmal danke :)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Breite einer Tabellenspalte verändern

            Struppi Homepage des Autors
            – Informationen zu den Bewertungsregeln

            ah, in der von dir geschriebenen Funktion gibt es ein mouse.obj
            das ist vermutlich genau das was ich brauche. wird eingebaut und getestet, nochmal danke :)

            genauuu

            Struppi.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Breite einer Tabellenspalte verändern

    Gernot Back
    +1 Informationen zu den Bewertungsregeln

    Hallo Heph,

    ich möchte gerne mit Javascript die Breite einer Tabellenspalte durch Ziehen der Spaltenkante mit der Maus ändern können.

    Ich habe schon einige Beispiele gefunden, allerdings funktionieren die alle mit CSS (http://gtalbot.org/DHTMLSection/ColumnResize.html).

    Funktionieren die wirklich, das scheint mir nicht so.

    Ich möchte gerne eine Funktion schreiben die man nachher auf eine normale Tabelle in HTML anwenden kann. Deshalb ist die Tabelle nicht im CSS definiert und ich vermute damit funktioniert es mit dem angegebenen Beispiel nicht mehr. Ich kann auch nicht einschätzen ob das CSS im Bsp essentiell ist oder ob man es so umbauen kann dass es für normale HTML Tabellen funktioniert ?

    Ohne ein Zusammenspiel von CSS und Javascript (vulgo DHTML) wird da sowieso nichts funktionieren.

    Ich habe dir mal eine Beispielseite hochgeladen. Mit dem Cursor, der beim Draggen von der Spaltengrenze wegschert, bin ich da aber selbst noch nicht zufrieden, auch nicht damit, wie sich die jeweils nicht direkt beachbarten Spalten verhalten, wenn man an einer Spaltengrenze spielt. Mal sehen, ob man die Größenveränderung vielleicht noch über COL-Elemente ausgehend von der bestehenden relativen Weite der gerade nicht direkt betroffenen beiden Nachbarspalten zueinander, ggf. mit table-layout:fixed regeln könnte.

    http://www.lernspielwiese.de/resizetablecolumn/

    Gruß Gernot

    --
    super me
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Breite einer Tabellenspalte verändern

      Heph
      – Informationen zu den Bewertungsregeln

      Hi Gernot,
      danke für deine Antwort, deine Beispielseite kommt dem was ich will schon ziemlich nahe!
      Ich hatte mir es so gedacht dass eine Kante sich nur innerhalb zweier Zellen verschieben lässt und das Verschieben alle anderen Spalten nicht betrifft. Da muss ich mir nochmal überlegen in wie weit das sinnvoll und umsetzbar ist.

      Unter der Woche habe ich leider kaum Zeit, werde mir dann nächstes WE doch mal CSS anschaun und Versuchen dein Beispiel genau nachzuvollziehn.

      Ich habe schon einige Beispiele gefunden, allerdings funktionieren die alle mit CSS (http://gtalbot.org/DHTMLSection/ColumnResize.html).

      Funktionieren die wirklich, das scheint mir nicht so.

      nur die erste Spalte und da hat es bei mir auch nicht immer geklappt, kann aber sein dass es daran lag dass ich schon ein paar Sachen im Code geändert hab :) habe dieses Bsp als Vorlage verworfen.

      Gruß Heph

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Breite einer Tabellenspalte verändern

    Struppi Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    ich möchte gerne mit Javascript die Breite einer Tabellenspalte durch Ziehen der Spaltenkante mit der Maus ändern können.

    Hier mal ein Entwurf wie man sowas lösen könnte
    http://javascript.jstruebig.de/test/tabellen ziehen.html
    Da gibt's sicher noch Verbesserungsmöglichkeiten und in der Höhe ändern geht noch nicht.

    Struppi.

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Höhe einer Tabellenzeile verändern

      Gernot Back
      – Informationen zu den Bewertungsregeln

      Hallo Struppi,

      Hier mal ein Entwurf wie man sowas lösen könnte
      http://javascript.jstruebig.de/test/tabellen ziehen.html
      Da gibt's sicher noch Verbesserungsmöglichkeiten und in der Höhe ändern geht noch nicht.

      Wow, klasse Arbeit! Das mit der Höhenanpassung geht halt nur, wenn du den Inhalt der Tabellenzellen-Elemente doch jeweils in ein Blockelement schachtelst, dem du, wie allen seinen "Geschwistern" (ich sollte besser sagen "Vettern und Basen") in derselben Tabellenzeile dynamisch die Höhe in Pixeln zuweist nebst overflow:hidden, was halt in Tabellenzellen oder -zeilen selbst nicht wirkt.

      Gruß Gernot

      --
      super me
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Höhe einer Tabellenzeile verändern

        Struppi Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hier mal ein Entwurf wie man sowas lösen könnte
        http://javascript.jstruebig.de/test/tabellen ziehen.html
        Da gibt's sicher noch Verbesserungsmöglichkeiten und in der Höhe ändern geht noch nicht.

        Wow, klasse Arbeit! Das mit der Höhenanpassung geht halt nur, wenn du den Inhalt der Tabellenzellen-Elemente doch jeweils in ein Blockelement schachtelst, dem du, wie allen seinen "Geschwistern" (ich sollte besser sagen "Vettern und Basen") in derselben Tabellenzeile dynamisch die Höhe in Pixeln zuweist nebst overflow:hidden, was halt in Tabellenzellen oder -zeilen selbst nicht wirkt.

        Danke.

        Mal schauen ob ich da noch was einbaue. Opera tut sich schwer mit dem Skript, es scheint er paßt nicht so einfach die Zellenbreite an. Vielleicht muss man da mit colgroup/col Elementen arbeiten.

        Struppi.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Höhe einer Tabellenzeile verändern

          Gernot Back
          – Informationen zu den Bewertungsregeln

          Hallo Struppi,

          Mal schauen ob ich da noch was einbaue. Opera tut sich schwer mit dem Skript, es scheint er paßt nicht so einfach die Zellenbreite an. Vielleicht muss man da mit colgroup/col Elementen arbeiten.

          Das war auch bei meinem Ansatz so. Verbreitert hat er die Tabellenzellen zwar, aber nicht verkleinert.

          Gruß Gernot

          --
          super me
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln