Ergebnis 1 bis 11 von 11
Like Tree1Likes
  • 1 Post By andreax

Thema: Hintergrundfarben von Tabellenzeilen neu setzen

  1. #1
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    Hintergrundfarben von Tabellenzeilen neu setzen

    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-Code:
    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
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.685

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    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.

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    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.
    Geht halt zum jetzigen Zeitpunkt nicht mit CSS daher suche ich nach einer JS Lösung. Muss auch nicht zwingend jQuery sein.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.685

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    Warum geht es nicht mit CSS?

  5. #5
    jeffglennfox ist offline Mitglied
    registriert
    08-08-2008
    Beiträge
    43

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    Hallo,

    ich habe leider von JQuery nicht wirklich Ahnung aber versuche trotzdem weiterzuhelfen in dem Rahmen, wie ich die Problematik verstehe. Vielleicht wäre das ein möglicher Lösungsansatz ?

    https://stackoverflow.com/questions/...-of-an-element

    Gruss

    von Markus

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    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.

    Ich schau mal wie ich zurecht komme.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.685

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    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/com...bf4e7ed5c5b8da 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.

  8. #8
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    Inzwischen bin ich auch soweit hiermit:
    HTML-Code:
    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');
    }
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.685

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    Wenn du es so machst, solltest du aber auch mit CSS und :nth-child(odd) und :nth-child(even) arbeiten können.

  10. #10
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    Ja das wird auch noch umgebaut aber das ist etwas aufwändiger.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  11. #11
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

    AW: Hintergrundfarben von Tabellenzeilen neu setzen

    Hallo an Alle.
    Sowas kann schon knifflig werden hier mein CSS Ansatz dazu.
    Es funktioniert beides nth-child und nth-of-type.

    HTML-Code:
    <!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>
    mikdoe likes this.

Ähnliche Themen

  1. Anker setzen um die Zeile an die Spitze zu setzen
    Von Grobian im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 05-09-2013, 14:09
  2. tabellenzeilen einfärben
    Von wsxcde im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 08-11-2010, 00:12
  3. Hintergrundfarben drucken in IE ???
    Von petz_e im Forum Allgemeines
    Antworten: 5
    Letzter Beitrag: 10-04-2006, 13:56
  4. W2K & NVidia treiber & verlorene Hintergrundfarben
    Von style-guide! im Forum Windows
    Antworten: 1
    Letzter Beitrag: 03-06-2003, 18:35
  5. Tabellenzeilen ein- & ausklappen
    Von Michael B. im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 02-02-2002, 14:36

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •