Orlando: neuer Beitrag "Tipps&Tricks": DHTML/Fullrowselect

Liebe Gemeinde,

wir haben Nachwuchs :) Andreas aka MudGuard erläutert in seinem DHTML-Beitrag  "Datensatzauswahl aus Tabelle mit Fullrowselect" für die "SELFHTML Tipps&Tricks", wie man gesamte Tabellenzeilen selektierbar macht und gleichzeitig mittels DOM deren Formatierung zellenübergreifend ändert, indem man ihnen eine andere CSS-Klasse zuweist.

http://aktuell.de.selfhtml.org/tippstricks/dhtml/full-row-select/

Wer einen interessanten Beitrag hat und ihn hier gerne veröffentlichen würde, möge sich bitte melden (http://aktuell.de.selfhtml.org/people/devs.htm) und/oder das Formular in Anspruch nehmen (http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm).

BTW, wenn ihr hier im Forum ein Posting vorfindet, dessen Inhalt ihr dort gerne sehen würdet, sprecht doch den/die Ersteller/in einfach darauf an ;)

LG Orlando

  1. Moin!

    http://aktuell.de.selfhtml.org/tippstricks/dhtml/full-row-select/

    Jetzt müßte nur noch jemand diesen Link anpassen, weil der Artikel tatsächlich unter http://aktuell.de.selfhtml.org/tippstricks/dhtml/fullrowselect/ liegt. :)

    - Sven Rautenberg

    1. Hi Sven,

      http://aktuell.de.selfhtml.org/tippstricks/dhtml/full-row-select/

      Jetzt müßte nur noch jemand diesen Link anpassen, weil der Artikel tatsächlich unter http://aktuell.de.selfhtml.org/tippstricks/dhtml/fullrowselect/ liegt. :)

      Mist, vorhin war er dort noch zu erreichen ;)

      Danke.
      LG Orlando

  2. Hallo, Orlando (und Andreas),

    Ein paar Anmerkungen:

    Dürfen überhaupt zwei label-Elemente für ein Eingabefeld existieren...? (Im Zweifel würde ich es so lassen und auf XForms warten. ;-))

    Der Code geht über zwei Bildschirmbreiten bei 1024x768, man bedenke dass es <pre> ist, also explizit white-space:nowrap, zudem ist es pixelgenaue Schrift, die sich im IE nicht skalieren lässt). Spätestens (!) bei 110-120 Zeichen pro Zeile würde ich einen Zeilenumbruch machen, auch wenn es mitten im Element-Starttag natürlich schwierig ist. Zwei Beispiele:

    <tr class="unchecked" id="rownr1"><td><input type="checkbox" id="checknr1" name="checknr1" onclick="return rowclickedcheck('checknr1','rownr1');" onkeyup="return rowclickedcheck('checknr1','rownr1');"></td><td><label for="checknr1">Vereinigtes Königreich von Großbritannien und Nordirland</label></td><td><label for="checknr1">London</label></td></tr>

    --->

    <tr class="unchecked" id="rownr1">
    <td><input type="checkbox" id="checknr1" name="checknr1" onclick="return rowclickedcheck('checknr1','rownr1');" onkeyup="return rowclickedcheck('checknr1','rownr1');"></td>
    <td><label for="checknr1">Vereinigtes Königreich von Großbritannien und Nordirland</label></td>
    <td><label for="checknr1">London</label></td>
    </tr>

    und

    window.setTimeout("colorizeRow('"+checkid+"','"+rowid+"')",300); //delay ist notwendig, weil der Eventhandler ausgelöst wird, bevor die Checkbox umgeschaltet wird...

    --->

    // delay ist notwendig, weil der Eventhandler ausgelöst wird,
    // bevor die Checkbox umgeschaltet wird...
    window.setTimeout("colorizeRow('"+checkid+"','"+rowid+"')",300);

    Und so weiter.  Das ist schon viel übersichtlicher. Ich würde nicht "harte" Tabulatoren für Einrückungen benutzen, besser je Einrückebene X Blanks (ich verwende immer X=1).

    Lange Strings kann man theoretisch auch einfach in mehrere Zeilen umbrechen:

    string="murks murks murks murks murks murks"+
           "murks murks murks murks murks murks"+
           "murks murks murks murks murks murks";

    Ansonsten:

    "auf einee Checkbox"
             ^
    "idrow = "" + idrowcommon + i;;"
                                  ^

    Ich würde Attribute und Elemente mit <code> kennzeichnen (nur ein Vorschlag), bspw.: "...wird durch den Wert im <code>for</code>-Attribut erreicht, der mit dem <code>id</code>-Wert [oder <var>? ;)] des <code>input</code>-Elements übereinstimmen muss"

    Unter "Beachten Sie" fehlt, dass das label-Element nicht nur nicht im NS4 funktioniert, sondern ihn auch umgehen zum Crash veranlasst... insofern ist dann nichts mehr "voll funktionsfähig". ;)

    Hm, der 300ms-Timeout zieht sich inklusive Rendern bei mir (P133) bis zu einer Sekunde hin (im Hintergrund läuft Les Nuits von Nightmares on Wax in 192kbps und verbraucht 85% der Rechenkapazität... ;-))

    Abgesehen davon sind mir keine Fehler aufgefallen. Vielen Dank an Andreas für den Artikel, "gute Arbeit". :)

    Vielleicht beschäftige ich mich in den nächsten Tagen noch einmal genauer und "optimiere" möglicherweise etwas bzw. spiele ein wenig damit herum (soll nicht heißen, dass es etwas zu optimieren gäbe). ;)

    Mathias
    (Der, der gerade den IE benutzt, um den Artikel auszutesten. :))

    1. Hi Mathias,

      Dürfen überhaupt zwei label-Elemente für ein Eingabefeld existieren...?

      Also IMHO ist alles korrekt, aber bitte - es ist spät.

      Der Code geht über zwei Bildschirmbreiten bei 1024x768, [...]

      Ja, das ist einerseits etwas unübersichtlich, andererseits ist der gleiche Aufbau der Zellen so ganz gut erkennbar. Ich sehe darin eigentlich gar kein Problem, ein bisschen Scrollen muss erlaubt sein. Na, schnaun mer amoi.

      Ich würde nicht "harte" Tabulatoren für Einrückungen benutzen, besser je Einrückebene X Blanks (ich verwende immer X=1).

      Hm, ich wüsste nicht, dass ich meinen Editor umgestellt hätte, aber das werde ich noch nachprüfen.

      Ansonsten:

      "auf einee Checkbox"
               ^
      "idrow = "" + idrowcommon + i;;"
                                    ^

      Danke, werde ich heute ausbessern.

      Ich würde Attribute und Elemente mit <code> kennzeichnen (nur ein Vorschlag), bspw.: "...wird durch den Wert im <code>for</code>-Attribut erreicht, der mit dem <code>id</code>-Wert [oder <var>? ;)] des <code>input</code>-Elements übereinstimmen muss"

      Ja, könnte man noch machen. Die Links im CSS-Teil waren grausam einzusetzen...

      Unter "Beachten Sie" fehlt, dass das label-Element nicht nur nicht im NS4 funktioniert, sondern ihn auch umgehen zum Crash veranlasst... insofern ist dann nichts mehr "voll funktionsfähig". ;)

      Na super, glaubst du, wir nehmen Rücksicht auf einen so alten Browser? Wenn du einen topaktuellen Browser hättest, hättest du auch kein Problem. Du musst eben auf Netscape 4.80 updaten! ;) Scherz beiseite, 4.78 hat bei mir keinerlei Absturz-Probleme auf der Seite (und bei dem Beispiel).

      Hm, der 300ms-Timeout zieht sich inklusive Rendern bei mir (P133) bis zu einer Sekunde hin (im Hintergrund läuft Les Nuits von Nightmares on Wax in 192kbps und verbraucht 85% der Rechenkapazität... ;-))

      Der Timeout dauert aber nur 300ms, dein Rechner braucht eben länger, bis er das schnallt - du brauchst (er braucht) eindeutig mehr Power. ;)

      Abgesehen davon sind mir keine Fehler aufgefallen. Vielen Dank an Andreas für den Artikel, "gute Arbeit". :)

      Wo wir beim Thema sind... Willst du mir etwas sagen? *räusper*

      Vielleicht beschäftige ich mich in den nächsten Tagen noch einmal genauer und "optimiere" möglicherweise etwas bzw. spiele ein wenig damit herum (soll nicht heißen, dass es etwas zu optimieren gäbe). ;)

      <I>ch wünsche d<I>r v<I>el Spaß dabe<I>

      LG Roland

      PS: Ro/Or/land/o - jetzt hätte ich fast Ronaldo geschrieben... %)

      1. <img src="http://www.fb07.de/temp/orlando.gif" border=0 alt="">

        PS: Ro/Or/land/o - jetzt hätte ich fast Ronaldo geschrieben... %)

        Finger weg vom Alkohol! :-)
        Oder ist schon wieder Fußball-WM?!

        Gruß,
        _Di *SCNR* rk

        1. <img src="http://skop.net/self/_dirk.gif" border=0 alt="">

          <img src="http://www.fb07.de/temp/orlando.gif" border=0 alt="">

          *muhaha*

          Coole Retourkutsche *lol*

          Ob ich das noch toppen kann? Na warten wir's ab :)

          Finger weg vom Alkohol! :-)
          Oder ist schon wieder Fußball-WM?!

          LG Or*gooooooooooooooooooooooooooool*lando

      2. Hallo, Orlando,

        Dürfen überhaupt zwei label-Elemente für ein Eingabefeld existieren...?

        Also IMHO ist alles korrekt, aber bitte - es ist spät.

        "Each LABEL element is associated with exactly one form control."
        http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
        Ob das jetzt heißt, dass jedes label-Element mehrere for-Attribute haben kann (wäre durchaus möglich oder label="id1 id2 id3" ;)) oder tatsächlich mehrere label-Elemente mit gleichem for-Attributwert erlaubt sind, kapiere ich nicht komplett...

        Der Code geht über zwei Bildschirmbreiten bei 1024x768, [...]

        Ja, das ist einerseits etwas unübersichtlich, andererseits ist der gleiche Aufbau der Zellen so ganz gut erkennbar. Ich sehe darin eigentlich gar kein Problem, ein bisschen Scrollen muss erlaubt sein. Na, schnaun mer amoi.

        Ich finde "ein bisschen" ein bisschen untertrieben... ;) (Würdest du die Meinung auch im Usenet vertreten? "Zeilenumbruch...? Waaas? Ein bisschen Scrollen hat noch niemand geschadet!!" ;))
        Ich denke auch, dass der gleiche Aufbau auch deutlich wird, wenn die Tabellenzeilen in Codezeilen je Zelle und gleichförmige Päckchen je Tabellenzeilen aufgeteilt sind... ähm... ja genau. (Erinnert mich an "Setze die Reihe fort"-Denksportaufgaben... ;) So schwer kann es nicht sein, die Ähnlichkeit zu erkennen, unabhängig davon, ob der Code in eine oder mehrere Zeilen gequetscht ist... IMHO.)

        Ich würde nicht "harte" Tabulatoren für Einrückungen benutzen, besser je Einrückebene X Blanks (ich verwende immer X=1).

        Hm, ich wüsste nicht, dass ich meinen Editor umgestellt hätte, aber das werde ich noch nachprüfen.

        Ich meinte im Quelltext des Beispielquelltextes. Host mi? ;)

        Unter "Beachten Sie" fehlt, dass das label-Element nicht nur nicht im NS4 funktioniert, sondern ihn auch umgehen zum Crash veranlasst... insofern ist dann nichts mehr "voll funktionsfähig". ;)

        Na super, glaubst du, wir nehmen Rücksicht auf einen so alten Browser? Wenn du einen topaktuellen Browser hättest, hättest du auch kein Problem. Du musst eben auf Netscape 4.80 updaten! ;)

        Ich *habe* 4.8... ;-P

        Scherz beiseite, 4.78 hat bei mir keinerlei Absturz-Probleme auf der Seite (und bei dem Beispiel).

        Dann liegt das auf Beispiel, wenn man den Code woanders einbaut, sieht es mit Sicherheit anders aus. Mir ging es auch nur darum, dass man ggf. einen kleinen Hinweis einbinden könnte.
        "Eine feste Garantie für Abstürze ist auch die Verwendung von <label> innerhalb von Elementen, die per CSS float: an ihre Position gebracht wurden. Aber damit nicht genug: selbst in Seiten, in denen in einem Formular <label> verwendet wird und auf denen an anderer Stelle (also auch ausserhalb des Formulars) ein Element per float: positioniert wurde - das Ergebnis ist immer dasselbe. Gleiches gilt im übrigen auch für alle Vorkommnisse von <label> innerhalb eines Elementes, das durch CSS mit position: und clear: manipuliert wurde."
        http://www.einfach-fuer-alle.de/seite03_6764.html (das erstbeste was ich gefunden habe).
        Live bestaunen darfst du den Crash auf http://reich-gym.de/ehem_anmeldung_form.php... wobei ich dort nirgends float einsetze AFAIR, dafür aber fieldset und legend. Ich schreibe extra den UA-Header bei der Anmeldung mit, weil mich brennend interessiert, wieviele NS4-Benutzer sich in der Datenbank herumtreiben, aber erst seit kurzem weiß ich, wieso sich seit *langer* Zeit kein NS4-Benutzer mehr angemeldet hat... Ich nehme an, bei dem Kontaktformular ist es dasselbe, was wiederum erklärt, wieso sich noch nie jemand diesbezüglich beschwert hat. Auch eine Möglichkeit, Netscape-Benutzer *dezent* den Upgrade nahezulegen. ;)

        Hm, der 300ms-Timeout zieht sich inklusive Rendern bei mir (P133) bis zu einer Sekunde hin (im Hintergrund läuft Les Nuits von Nightmares on Wax in 192kbps und verbraucht 85% der Rechenkapazität... ;-))

        Der Timeout dauert aber nur 300ms, dein Rechner braucht eben länger, bis er das schnallt - du brauchst (er braucht) eindeutig mehr Power. ;)

        Nein, die Zeit ist relativ... es wird sofort in den Timeout eingestiegen, nur gehen bei uns[tm] die Uhren anders als bei euch[tm] (auch im übertragenden Sinne)! ;)

        Abgesehen davon sind mir keine Fehler aufgefallen. Vielen Dank an Andreas für den Artikel, "gute Arbeit". :)

        Wo wir beim Thema sind... Willst du mir etwas sagen? *räusper*

        "Jaja"... :) Ich habe gestern einmal wieder nach einem Monat (...) daran weitergearbeitet. <duck /> Zwischendrin hatte ich noch einen anderen Artikel geschrieben, von deren Sinnlosigkeit ich mich aber nun überzeugt habe. Es sollte ursprünglich eine Ergänzung zum Popup-Howto werden, welche sich mit der Benutzung von Popup-Fenstern für Bildergalerien beschäftigt. Es ging mir primär darum, eine Möglichkeit zu offerieren, an die Größe des jeweiligen Bildes angepasste Popups zu verwenden, in welchen ein PHP-Script geöffnet wird, was die übergebene Grafik einbinden. Dazu wollte ich eine "halbautomatische" Version vorstellen, welche die Links zu den Bildern schreibt, welche dann das Popup-Fenster mittels JavaScript-Funktionsaufruf öffnen, es wird also zweifach PHP eingesetzt.
        Der Nachteil davon ist jedoch, dass die halbautomatische Version keinen Vorteil bringt, da einerseits die einzelnen Links immer noch durch manuelle PHP-Funktionsaufrufe generiert werden und andererseits das Kernproblem der Zugänglichkeit nicht gelöst ist, denn die Seite, welche die Grafik einbindet, kann weder Alternativtext noch Bildtitel noch longdesc anzeigen, da all diese Parameter per GET übergeben werden müssten... Alles in allem ein sinnloses Unterfangen, da sich so etwas wirklich zugänglich (d.h. komplett ohne JavaScript, Alternativinhalte für alle Bilder) nur mit einer Datenbank lösen ließe. Meine halbautomatische Lösung hilft also nicht weiter, sie schränkt sogar ein dadurch, dass sie nicht in eventuell schon vorhandene fertige Galeriescripte eingebunden werden kann bzw. nur Bekanntes genannt wird. Die einzige wirkliche Erkenntnis ist nur, dass es von Nöten ist, eine volle Datei und nicht nur die Grafik im Popup zu öffnen, damit die Rahmen in allen Browsern unterdrückt werden können und in einem noscript-Element ggf. ein Zurück-Link eingebaut werden kann...
        Somit habe ich den Artikel wieder verworfen bzw. werde ihn nicht vollenden und wende mich wenn möglich wieder dem Popup-Howto zu... vielleicht kann ich in einigen Tagen eine neue Version hochladen, ich habe einmal wieder gewütet. Ich komme irgendwie zu nichts, dabei habe ich in Moment noch alle Zeit der Welt (kann nächste Woche schon anders sein - das ist ungewiss).

        Vielleicht beschäftige ich mich in den nächsten Tagen noch einmal genauer und "optimiere" möglicherweise etwas bzw. spiele ein wenig damit herum (soll nicht heißen, dass es etwas zu optimieren gäbe). ;)

        <I>ch wünsche d<I>r v<I>el Spaß dabe<I>

        <em>ch d<em>r auch! ;)

        PS: Ro/Or/land/o - jetzt hätte ich fast Ronaldo geschrieben... %)

        Über eure kleinen Grafiken amüsiere ich mich köstlich. :)

        *augenzufall*
        Mathias
        (neigt zur späten Stunde zu übertriebener Selbstironie, unbeholfenem Humor und Menschelei.)

        1. Hi

          Dürfen überhaupt zwei label-Elemente für ein Eingabefeld existieren...?

          Also IMHO ist alles korrekt, aber bitte - es ist spät.

          "Each LABEL element is associated with exactly one form control."
          http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

          Ob das jetzt heißt, dass jedes label-Element mehrere for-Attribute haben kann (wäre durchaus möglich oder label="id1 id2 id3" ;)) oder tatsächlich mehrere label-Elemente mit gleichem for-Attributwert erlaubt sind, kapiere ich nicht komplett...

          Das heißt: jedes einzelne Label kann nur zu einem einzigen Form-Element gehören (logisch, wenn ich auf das Label klicke, darf nur 1 Element darauf reagieren).

          Mehrere Attribute gleichen Namens in einem Element sind überhaupt nicht erlaubt, also auch nicht für das for-Attribut beim label-Element.

          Für das for-Element ist IDREF als Typ festgelegt. Im Gegensatz zu IDREFS ist bei IDREF nur eine einzige id erlaubt.

          Insbesondere heißt es sogar (<>) - beachte den hier mit Sternchen markierten Satz:
          The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. *******More than one LABEL may be associated with the same control by creating multiple references via the for attribute. *******

          Womit das also explizit erlaubt ist.

          Unter "Beachten Sie" fehlt, dass das label-Element nicht nur nicht im NS4 funktioniert, sondern ihn auch umgehen zum Crash veranlasst... insofern ist dann nichts mehr "voll funktionsfähig". ;)

          Weder mein Netscape 4.71 noch mein 4.76 noch mein 4.78 stürzen bei Verwendung von Label ab. Sie beachten es einfach nicht, geben nur den Inhalt aus.

          Robert

          1. Sorry, zu früh auf return gekommen, hier der Link:

            http://www.w3.org/TR/html401/interact/forms.html#adef-for

            Und noch was: der Artikel ist gut!

            Robert

          2. Hallo, Robert.

            Dürfen überhaupt zwei label-Elemente für ein Eingabefeld existieren...?

            Also IMHO ist alles korrekt, aber bitte - es ist spät.

            "Each LABEL element is associated with exactly one form control."
            http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

            Ob das jetzt heißt, dass jedes label-Element mehrere for-Attribute haben kann (wäre durchaus möglich oder label="id1 id2 id3" ;)) oder tatsächlich mehrere label-Elemente mit gleichem for-Attributwert erlaubt sind, kapiere ich nicht komplett...

            Das heißt: jedes einzelne Label kann nur zu einem einzigen Form-Element gehören (logisch, wenn ich auf das Label klicke, darf nur 1 Element darauf reagieren).

            Dies alleine lässt natürlich noch nicht den Umkehrschluss zu, dass jedes Formularfeld genau ein Label haben darf, deshalb war ich mir unsicher. :)

            Mehrere Attribute gleichen Namens in einem Element sind überhaupt nicht erlaubt, also auch nicht für das for-Attribut beim label-Element.

            Deshalb war da auch ein ";)" hinter, das war mir bewusst, es ist, wie du gesagt, offensichtlich und logisch (genauso sinnfrei wäre id="foo bar baz" ;)).

            Insbesondere heißt es sogar (http://www.w3.org/TR/html401/interact/forms.html#adef-for) - beachte den hier mit Sternchen markierten Satz:
            The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. *******More than one LABEL may be associated with the same control by creating multiple references via the for attribute. *******

            Ja, das hatte ich gelesen, soweit ich mich erinnere, mir aber wohl nicht vergegenwärtigt, sonst hätte ich diesen Satz zitiert... Danke für die Auflärung.

            Womit das also explizit erlaubt ist.

            Ich erachte es dennoch nicht als sinnvoll im Hinblick auf Barrierefreiheit. Im Beispiel kommt zusätzlich die Linearisierung von Tabellen hinzu, was die "Abwärtstransformierung" noch einmal erschwert, weshalb man ggf. mit th, scope oder headers arbeiten sollte. Mehrere Labels würde ich persönlich vermeiden, sofern es möglich ist.

            Unter "Beachten Sie" fehlt, dass das label-Element nicht nur nicht im NS4 funktioniert, sondern ihn auch umgehen zum Crash veranlasst... insofern ist dann nichts mehr "voll funktionsfähig". ;)

            Weder mein Netscape 4.71 noch mein 4.76 noch mein 4.78 stürzen bei Verwendung von Label ab. Sie beachten es einfach nicht, geben nur den Inhalt aus.

            Wie gesagt: es kommt auf die Verwendung und die Seite an, in welcher das label-Element eingebettet ist (siehe Zitat von einfachfueralle.de). Hast du den Beispiellink probiert (http://reich-gym.de/ehem_anmeldung_form.php)? fieldset, legend und label und einige CSS-Formatierungen bringen 4.8 in jedem Fall zum sofortigen Crash.
            (P.S. Ein Netscape 4.x ist mir *mehr* als genug, wozu hast du drei? :) Unterscheiden sie sich großartig?)

            Grüße,
            Mathias