Click-Handler für Tabellenspalte (außer thead/tfoot)

[MudGuard]

Hi,

ich habe eine Tabelle mit mehreren TBody darin, die jeweils mehrere tr zusammenfassen.

Ich hätte jetzt gerne auf einer Spalte einen Click-Handler, der dann Daten aus der betroffenen Zeile braucht.

Wie ist das sinnvollste Vorgehen?

onclick in jede Zelle der Spalte durch php reingenerieren (nur innerhalb der tbody-Elemente, nicht im thead/tfoot), dabei die Daten für die handler-Funktion gleich als Parameter übergeben

Selbiges, aber nicht per PHP, sondern per Javascript im Browser einmal über alle Zellen der betroffenen Spalten gehen und den passenden Funktions-Aufruf samt Parametern reingenerieren

EINEN Clickhandler auf der Tabelle, der sich dann anhand des targets die betroffene Zelle und dann über parent die betroffene Zeile raussucht. Dann müßte ich noch rauskriegen, ob der Klick überhaupt die richtige Spalte getroffen hat. *)

Gibt's noch ne bessere Variante?

(ich brauch keinen fertigen Code, nur mal Aussagen dazu, wie Ihr das angehen würdet)

*) ob die richtige Spalte getroffen wurde, kann ich nicht am Inhalt erkennen, der kann bei mir auch leer sein (und der Inhalt anderer Spalten auch). Da muß ich wohl gucken, das wievielte Kind der Zeile das Target ist - verbundene Zellen hab ich zum Glück nicht, so daß das wenigstens zuverlässig sein sollte - Spalten kommen auch eher nicht dazu - nur Zeilen werden es immer mehr …

PS: ist nur für mich, also kein Problem mit dem Click auf td wg. accessability ...

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Andreas,

beim Tabellensortierer habe ich keine klickbaren THs mehr. Ich lege statt dessen in die THs einen Button. Der bekommt dann im click-Handler mitgeteilt, nach welcher Spalte sortiert werden soll.

Es bekommt also jedes klickbare Tabellenfeld einen eigenen Handler mit der Info, wo geklickt wurde. Das kann man bestimmt auch mit einem zentralen Handler regeln, und die Info kommt dann z.B. in ein data-Attribut.

Gruß
Jürgen

[Rolf B]

Hallo Andreas,

wie Jürgen schrieb: der bedienbare Weg ist ein button-Element für diese Zellen, das Du per CSS unsichtbar machst. Damit kannst Du automatisch durch die Tabelle tabben und wahlweise ENTER, Mausklick oder Touch-Tab zur Auswahl verwenden.

Alle 3 Auslöser behandelst Du mit einem click-Handler auf der Tabelle. Wenn der Button HTML enthalten kann, ist event.target ggf. ein Kindelement des Buttons, den Button müsstest Du dann mit event.target.closest("button") herausfinden.

Ich habe jetzt eine Weile gesucht und gebastelt, wegen des unten beschriebenen Höhenproblems. Ansonsten hätte ich Jürgens Antwort unkommentiert gelassen.

<td>
  <button type="button">
    inhalt
  </button>
</td>

   tr {
      height: 1px;       /* siehe Erklärung unten */
   }
   td:has(button) {
      padding: 0;        /* Kein Padding auf Zellen mit Button */
      height: inherit;   /* siehe Erklärung unten */
   }
   td button {
      display: block;
      padding: /* Hier das Padding, das die Zelle sonst hätte */
      width: 100%; 
      height: 100%;
      font: inherit;     /* Browser-Styles geben Buttons eigenen Font! */
      border: none;
      background: transparent;
   }

Wenn Du noch andere Buttons hast, musst Du deinem Datenübernahmebutton noch eine Klasse stiften. Oder mit nth-child die richtige Tabellenspalte auswählen - sofern möglich.

Die Height-Akrobatik mit 1px in tr und inherit in td hat den simplen Grund, dass andernfalls Tabellenzellen nicht die volle Höhe der Row haben. Dies ist der einzige Workaround, den ich gefunden habe, um das Problem mit reinem CSS zu lösen (keine Ahnung ob unser Wiki oder einer von Gunnars Noti.st Vorträgen was dazu weiß). Ohne diesen Workaround kann es passieren, dass Du eine Zelle mit 5 Zeilen hast und deine Button-Zelle mit bspw. 3 Zeilen, und der Button füllt dann nicht die komplette Zelle.

Zum Beweis gib dem Button eine Hintergrundfarbe und lass die Height-Akrobatik weg. Eine bessere Lösung (ohne JS) würde mich interessieren.

Rolf

[Felix Riesterer]

Lieber MudGuard,

nur als Ergänzung zu meinen Vorgängern: Ein Button kann beliebige data-*-Attribute haben. Das mache ich mir in manchen Tabellen zunutze, indem ich den zentralen EventListener daran erkennen lasse, was der Button für eine Bedeutung haben soll. Das macht die JS-seitige Auswertung ziemlich komfortabel. Da können sogar JSON-Daten drin stehen! Und Du bist ja völlig frei, ob der Button serverseitig oder clientseitig generiert wird.

Liebe Grüße

Felix Riesterer

[MudGuard]

Hi,

danke an alle, die sich Gedanken zu meinem Thread gemacht haben.

cu,
Andreas a/k/a MudGuard