✔ Table background-color auslesen

[Sprint]

Hallo zusammen,

ich habe hier eine Tabelle, die mit einem jQuery Script formatiert wird. Die Tabellenzeilen werden mittels "nth-child" abwechselnd eingefärbt. Soweit funktioniert alles wunderbar.

Da die Zeilen aber recht lang werden, sollen nun eine oder auch mehrere Zeilen mit einer Checkbox eingefärbt werden können. Auch das klappt schon und wird mit dieser Funktion gemacht:

var tabcolor = function(){
    $(":checkbox").change(function () {
        if ( $(this).is(':checked') ) {
            $(this).parent('td').parent('tr').css('background-color', '#FFE4C4');
        } else {
            $(this).parent('td').parent('tr').css('background-color', 'transparent');
        }
    });
}

input type="checkbox" name="dummy" id="dummy" value="" onclick="tabcolor(this)" />

Mein erstes Problem ist, wie ich jetzt beim Ausschalten die alte Hintergrundfarbe wieder erhalte. Es müßte also vorher ausgelesen werden, welche Hintergrundfarbe die Tabellenzeile besitzt.

Das zweite Problem ist, daß die Funktion erst ab dem zweiten Mal funktioniert. Das erste Einschalten bleibt absolut folgenlos, erst wenn ich den Haken wieder entferne und dann wieder setze, wird die Zeile richtig eingefärbt. Und von da an funktioniert es immer.

Wäre schön, wenn mir da jemand helfen könnte.

Sprint

 

[Sempervivum]

Bei mir funktioniert es einwandfrei. Ausgangszustand ist, dass der Hintergrund der Tabellenzeile transparent ist. Mit dem ersten Klick wird sie dann eingefärbt. Oder ist bei dir der Ausgangszustand, dass die Zeile eingefärbt ist?

Mein erstes Problem ist, wie ich jetzt beim Ausschalten die alte Hintergrundfarbe wieder erhalte. Es müßte also vorher ausgelesen werden, welche Hintergrundfarbe die Tabellenzeile besitzt.

Aus deinem Beispiel erschließt sich mir nicht richtig, wie Du das meinst. Du könntest die Hintergrundfarbe in einem data-Attribut speichern.

 

[Sprint]

Ja, bei der Hälfte der Zeilen paßt es. Bei den anderen Hälfte, also jeder zweiten Zeile, die über CSS "nth-child" eingefärbt wird, verschwindet nach dem Entfernen der Markierung die etwas dunklere Farbe. Diese Farbe wird aber meines Wissens nach nicht in der Zeile gespeichert.

 

[Sempervivum]

Hast Du denn in jeder Zeile eine Checkbox? Wie schon geschrieben, die Farbe könntest Du dynamisch oder statisch in einem data-Attribut speichern.

 

[Sprint]

Ja, jede Zeile hat ihre eigene Checkbox.

Wie gesagt, die Zeilen werden über CSS automatisch eingefärbt, und da gibt es keine Farbe, die irgendwo gespeichert würde. Dazu müßte ich in der Schleife, die die Zeilen aus der Datenbank befüllt, die Farbe jeweils zu Fuß setzen. Warum aber soll ich das machen, wenn CSS das ganz alleine kann?

 

[Sempervivum]

Ist es dies, was Du brauchst?

var tabcolor = function(){
    $(":checkbox").change(function () {
        if ( $(this).is(':checked') ) {
            $(this).parent('td').parent('tr').css('background-color', $(this).attr("data-bgcolor"));
        } else {
            $(this).attr("data-bgcolor", $(this).parent('td').parent('tr').css('background-color');
            $(this).parent('td').parent('tr').css('background-color', 'transparent');
        }
    });
}

 

[Sprint]

So, heute hatte ich auch wieder die Gelegenheit, mich damit zu beschäftigen. Deine Lösung hat mich zwar im Endeffekt auf ein funktionierendes Ergebnis gebracht, nur so, wie ich es gedacht hatte, funktioniert es nicht.

Das Problem ist, wie schon ein paar Mal bemerkt, daß bei einer Einfärbung über nth-child keine echten background-colors eingetragen werden. Also war das beste Ergebnis, daß ich nach jedem Ausschalten einen weißen Hintergrund hatte. Ich habe es jetzt so gemacht, daß beim Aufbau der Tabelle das data- Attribut bereits gesetzt wird. Das Auslesen entfällt, ebenso wie das Setzen von transparent beim Zurücksetzen. Die Endlösung sieht also jetzt so aus:

var tabcolor = function(){
    $(":checkbox").change(function () {
        if ( $(this).is(':checked') ) {
            $(this).parent('td').parent('tr').css('background-color', '#FFE4C4');
        } else {
            $(this).parent('td').parent('tr').css('background-color', $(this).attr("data-bgcolor"));
        }
    });
}

Es ist halt einfach nur schade, daß das nicht in Verbindung mit einer reinen CSS Lösung funktioniert.

Trotzdem Danke für deine Hilfe,
Sprint