• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Hintergrundfarben von Tabellenzeilen neu setzen

mikdoe

mikdoe

Moderator
Hi!
Habe eine Tabelle in der die Zeilen abwechselnd weiß oder hellgrau sind.
Nun lösche ich eine Zeile und möchte ab der nächsten bis zur letzten Zeile die Farben neu abwechselnd setzen.
Habe etliches probiert mit .sibling() oder .next() usw. Klappte alles nicht. Keine Konsolenfehler, keine Farbänderungen.
Hier mein letzter Versuch:
HTML: 
jQuery(znode).next().each(function(index) {
	jQuery(this).css('background-color', index % 2 === 0 ? 'white' : 'lightgrey');
});
znode ist das Element <tr> welches zu diesem Zeitpunkt noch nicht gelöscht ist.
Diesen Code hatte ich in stack gefunden.
Wie ist die richtige Syntax? Danke
 
index gibt dir nicht die Position im HTML an, sondern die Position in der jQuery-Collection. Du musst einmal durch alle <tr>s durchgehen - dann hast du auch den richtigen Index.
 
Danke Korbinian!

Das index ist ja nur hilfsweise, um die Abwechslung der Farben am geraden/ungeraden Zähler fest zu machen. Was index genau ist, ist mir dabei egal. Das war halt eines meiner tausend Suchergebnisse das nicht funktioniert.
Ich hatte auch Lösungen mit jQuery's :odd und :even Selektor probiert, die blieben aber auch ohne Wirkung.

Der Weg ist egal, Hauptsache es kachelt - ähh - ich meinte toggelt. :p
Geht halt zum jetzigen Zeitpunkt nicht mit CSS daher suche ich nach einer JS Lösung. Muss auch nicht zwingend jQuery sein.
 
Hi Markus!
Danke dir.
Der Stack Beitrag behandelt die frage, wie man die computete Hintergrundfarbe ermittelt. Das ist zwar auch nötig, habe ich aber viel einfacher lösen können.
Mein Problem liegt darin, bei der Iteration durch die <tr>' einer Tabelle abwechselnde Farben zu setzen.
Aber ich bin schon an einer CSS Lösung dran.
Dafür muss ich leider recht tief in die Struktur eingreifen und das wollte ich eigentlich auf irgend wann mal verschieben. :cool:

Ich schau mal wie ich zurecht komme.
 
Ich habe tatsächlich am Wochenende ein ähnliches Problem gehabt. Ich konnte nicht mit CSS arbeiten, weil Zeilen dynamisch per display: none; ausgeblendet werden. Deswegen hab' ich dann das gemacht: https://github.com/kkapsner/kkjs/commit/88b2006201a42900d3e71d58f9bf4e7ed5c5b8da und im Code der Seite:
Code: 
		kkjs.table.forEachVisibleRow(table, function(row, index){
			var isOdd = index % 2 === 0;
			kkjs.css.className[isOdd? "add": "remove"](row, "odd");
			kkjs.css.className[!isOdd? "add": "remove"](row, "even");
		});
- sollte eigentlich recht einfach zu jQuery übersetzt werden können.
 
Inzwischen bin ich auch soweit hiermit:
HTML: 
var is_odd = false;
for (var i = 0; i < tabnode.rows.length; i ++) {
	is_odd = !is_odd;
	tabnode.rows[i].style.backgroundColor = (is_odd ? 'grey' : 'white');
}
 
Wenn du es so machst, solltest du aber auch mit CSS und :nth-child(odd) und :nth-child(even) arbeiten können.
 
Hallo an Alle.
Sowas kann schon knifflig werden hier mein CSS Ansatz dazu.
Es funktioniert beides nth-child und nth-of-type.

HTML: 
<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<style>
		
		table{width:500px;height:auto;border-collapse:collapse;margin-top:20px;}
		/* Zebrastreifen */
		#t1 tbody tr{cursor:pointer;}
		#t1 tbody tr:nth-child(even){background-color:#888;}
		#t1 tbody tr:nth-child(even):hover{background-color:#945;}
		#t1 tbody tr:nth-child(odd){background-color:#ccc;}
		#t1 tbody tr:nth-child(odd):hover{background-color:#948;}	
	
	/* Schachbrettmuster */
		#t2 tbody tr:nth-of-type(even) td:nth-of-type(odd){background-color:#ccc;}
		#t2 tbody tr:nth-of-type(even){background-color:#888;}
		#t2 tbody tr:nth-of-type(odd){background-color:#ccc;}
		#t2 tbody tr:nth-of-type(odd) td:nth-of-type(odd){background-color:#888;}
	
		</style>
	</head>
	<body>
<table id="t1">
<caption>Zebra-Streifen</caption>
<thead><tr><th>11111</th><th>22222</th><th>33333</th><th>33333</th></tr></thead>
<tbody>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
</tbody>		
</table>

<table id="t2">
<caption>Schachbrett-Muster</caption>
<thead><tr><th>11111</th><th>22222</th><th>33333</th><th>33333</th></tr></thead>
<tbody>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td></tr>
</tbody>		
</table>				
	</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben