Matthias Scharwies: Datensatzauswahl aus Tabelle mit Fullrowselect

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

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

  2. @@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 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. 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

      1. Servus!

        @@MudGuard

        @@MudGuard

        oh Gott, das alte Teil existiert noch?

        Ich habe den Artikel jetzt 'wikifiziert':

        Die alte Version gibt's zu Anschaungszwecken im Museum:

        Herzliche Grüße

        Matthias Scharwies