[CSS / PHP] Jede zweite Zeile anders, aber aus einer CSS-Datei

[Cyperfriend]

Ich mache mittels PHP jede zweite Tabellenzeile anders.
[src=php]$color = (++$i % 2) ? '#a9c3e3' : '#a1c8f9';[/src]

Ich würde den Farbwert aber gerne aus einer CSS-Datei beziehen, wo ich eine entsprechende Klasse angelegt habe. Wie bekomme ich den Code entsprechend umgebaut? Irgendwie habe ich das nicht hinbekommen, auch mit PHP schließen und dann dazwischen (als HTML) class="bg1" schreiben hilft nicht, gibt nur einen unschönen Fehler.

 

[Kugelfisch]

In welchem Kontext gibst du [kw]$color[/kw] aus? Mutmasslich suchst du

$color = (++$i % 2) ? 'bg1' : 'bg2';
echo '<tr class="'.$color.'"><td>....</td></tr>';

Wenn du auf die abwechselnde Färbung in veralteten IE-Versionen, welche CSS Selectors Level 3 nicht unterstützen, verzichten kannst, könntest du das auch ohne PHP in purem CSS lösen:
[src=css]table tr td {
background: #333333;
}
table tr:nth-child(odd) td {
background: #232323;
}[/src]

 

[Cyperfriend]

Danke Kugelfisch,

das Problem ist, dass diese Farbgebung jetzt überall gilt, es aber (schon einige) Ausnahmen gibt und ich es daher "manuell" festlegen will. Gibt es andere Möglichkeiten?

 

[Kugelfisch]

Du kannst den Selektor natürlich anpassen, damit er nicht generell für alle table-Elemente, sondern z.B. nur für table-Elemente mit einer bestimmten Klasse gilt, etwa [kw]table.foobar tr td[/kw]

 

[Coca-Cola]

Das geht mit auch mit ein paar Zeilen jQuery recht einfach:

[src=javascript]
$(document).ready(function() {
$('#tabelle trdd').addClass("odd");
$('#tabelle tr:even').addClass("even");
});
[/src]

Die Tabelle, die bunt werden soll, gibst du die ID Tabelle und den CSS-Klassen odd und even kannst du deine gewünschten Farben geben.

 

[dexter]

Das geht mit auch mit ein paar Zeilen jQuery recht einfach[...]

Vorausgesetzt, man lädt jquery eh schon für andere Funktionen. Das extra dafür zu laden halte ich für überflüssig.

 

[LemonDrops]

Höher, schneller weiter ohne jQuery: Einfach ausführen, wenn das DOM fertig ist.

Zum Angucken: http://jsfiddle.net/7VwBP/

[src=javascript]
(function () {
var alternatingTableRowColors = function (settings) {
var tableRows = document.getElementById(settings.tableId).getElementsByTagName('tr');

for (var i = 0; i < tableRows.length; i++) {
if (i % 2 === 0) {
tableRows.style.background = settings.evenColor;
} else {
tableRows.style.background = settings.oddColor;
}
}
};

alternatingTableRowColors({
tableId: 'tableId',
evenColor: '#00ff00',
oddColor: '#ff0000'
});

}());
[/src]

Edit: Vermutlich wär's mit Klassen sinnvoller, aber so geht's.

 

[gelöschter Benutzer]

Dann aber bitte zusätzlich zum CSS3.

Javascript für Styling? *Haare rauf* So weit sind wir anscheinend schon!

 

[epiphora]

Abgetrennter Thread zum Thema JS/jQuery

Ich glaube, wir kommen ein bisschen vom Thema ab. Soll ich die Beiträge zur Nutzung von jQuery/Javascript mal ausgliedern?

Erledigt: https://ngb.to/threads/8852-Zur-Fra...-jQuery-als-Fallback-zum-Styling-zu-verwenden

 

[Cyperfriend]

Also ich blieb am Ende bei Kugelfischs Lösung hängen, da sie mir doch noch am Besten und vor allem unkompliziertesten erscheint (Der Fisch kennt mich einfach schon ). Sie ist nicht das NonPlusUltra, aber für meine Zwecke vertretbar.