Datensatzauswahl aus Tabelle mit Fullrowselect

[Matthias Scharwies]

Servus!

In diesem Selfhtml-Aktuell-Artikel kann man mithilfe einer Checkbox-Auswahl und JavaScript ganze Tabellenzeilen anklicken und einfärben.

<tr class="unchecked" id="rownr1">
  <td><input type="checkbox" id="checknr1" name="checknr1"></td>
  <td><label for="checknr1">Vereinigtes Königreich von Großbritannien und Nordirland</label></td>
  <td><label for="checknr1">London</label></td>
</tr>

Würde das evtl. auch rein mit CSS gehen, die Elternelemente und Onkel-Elemente td zu markieren?

Wie müsste das HTML umgebaut werden?

Im Netz gibt's einige jQuery-Lösungen, aslo wäre ein Umbau des vorhandenen JavaScripts (habe jeweils 2 Event-Attribute entfernt) wohl die bessere Möglichkeit, oder?

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

In diesem Selfhtml-Aktuell-Artikel kann man mithilfe einer Checkbox-Auswahl und JavaScript ganze Tabellenzeilen anklicken und einfärben.

oh Gott, das alte Teil existiert noch?

Würde das evtl. auch rein mit CSS gehen, die Elternelemente und Onkel-Elemente td zu markieren?

Probier aus, ob label:checked funktioniert.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Matthias Scharwies

Würde das evtl. auch rein mit CSS gehen, die Elternelemente und Onkel-Elemente td zu markieren?

Nein, mit Selektoren (Level 3) kommt man im Elementbaum nur nach „rechts“ (nachfolgende Geschwister) und nach „unten“ (Nachfahren).

Wie müsste das HTML umgebaut werden?

So, dass input und label Geschwister sind.

Wenn es da nicht diesen hässlichen WebKit-Bug gäbe, von dem immer noch einige Android bis in die 4er Version hinein betroffen sind und gegen den mir keine gute Lösung bekannt ist. Die in Artikel gezeigte Lösung frisst eine Menge CPU, also Perfromance und Batterie – nicht verwenden.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@MudGuard

oh Gott, das alte Teil existiert noch?

Ja, aber nicht mehr lange, weil der Bereich ja auch abgeschaltet werden soll. Die meisten Artikel sind schon ins Wiki überführt, bei einigen muss halt etwas modernisiert werden.

Würde das evtl. auch rein mit CSS gehen, die Elternelemente und Onkel-Elemente td zu markieren?

Probier aus, ob label:checked funktioniert.

Nein, weil es ja die ganze Tabellenzeile (also das (Groß-)Elternelement von label) umfassen soll. Ich hatte kurz an

tr:target

gedacht, das aber auch wieder verworfen.

@@Gunnar Bittersmann

Wie müsste das HTML umgebaut werden?

So, dass input und label Geschwister sind. [...] nicht verwenden.

Ich probier mal ne Tabelle (evtl. ohne Checkboxen) und die ganzen Attribute)) und versuche dann dynamisch Event-Handler mit passenden Funktionen, die dann die Klasse ändern, anzuhängen.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

@@MudGuard

@@MudGuard

oh Gott, das alte Teil existiert noch?

Ich habe den Artikel jetzt 'wikifiziert':

• JavaScript/Anwendung und Praxis/Datensatzauswahl aus Tabelle

Die alte Version gibt's zu Anschaungszwecken im Museum:

• JavaScript/Museum/Datensatzauswahl aus Tabelle

Herzliche Grüße

Matthias Scharwies