even/oneven rijen maar enkel visible

Probeer dit eens

tr {
  background-color: red;
}

tr:nth-child(4n - 1) {
  background-color: blue;
}

Lukt niet. Het gaat niet over elke 4 rijen maar over elke 2° rij welke niet display: none is.
Met 2n-1 lukt het ook niet.

Jan R op 07/09/2020 11:53:44

de rijen worden verborgen via een of meerdere javascript filters.

Jan R op 07/09/2020 11:53:44

Ik zoek wel een pure css oplossing dus geen javascript laat staan jquery :).

Sja...

edit: beetje flauw en kort door de bocht wellicht :p
Maar als je hier nou eens als volgt naar kijkt: wat als je nu niet zozeer filtert, maar elke keer de lijst echt opnieuw opbouwt met JavaScript. Je zou dan ook JavaScript altijd kunnen gebruiken om de lijst te voorzien van een geschakeerde achtergrondkleur. Dit gebeurt dan elke keer op dezelfde wijze, en niet de ene keer via CSS (bij laden van de pagina) en de andere via JavaScript (als je filtert).

Een andere optie is bijvoorbeeld dat je de zoek- of filteropdracht naar PHP delegeert ofzo, en dat die via AJAX een plak HTML uitspuugt, en dan kun je voor (on)even rijen gewoon een pure CSS-oplossinge gebruiken.

In beide gevallen is de crux in ieder geval dat je de lijst volledig opnieuw opbouwt.

Als ik andere oplossingen zo snel kan inschatten als ik hier vluchtig op Google dan lijken dit nogal omslachtige aanpakken. Ik zou voor een soort van "volledige refresh" strategie gaan, een oplossing in CSS werkt dan altijd.

Jan R op 07/09/2020 16:19:13

Lukt niet. Het gaat niet over elke 4 rijen maar over elke 2° rij welke niet display: none is.
Met 2n-1 lukt het ook niet.

Ik had het voorbeeldje hiervandaan:

http://jsfiddle.net/xzmnq0n9/

Hier lijkt het wel te werken. Kijk er even naar, misschien kun je er toch iets nuttigs uithalen.

Hier laten ze dan ook elke 2° rij verbergen. Vast gegeven! Bij mij kan elke mogelijkheid ontstaan.

Ah oké helder. Dan heb je er inderdaad niet veel aan.

Wellicht kun je de CSS3 operator 'not' gebruiken ...

:not([style*="display: none"])

tr:nth-child(even):not([style*="display: none"])

Geen idee of het werkt :)

Voor zover ik begrepen heb werkt dat laatste niet (de nth-child blijft gewoon tellen, ongeachte de wel/niet visible). Enige trucje wat ik zie is als de regels allemaal even hoog zijn een "gestreepte" achtergrond op de hele <table> te zetten (en dus niet op de row):

background-image: repeating-linear-gradient(red 0em, red 2em, green 2em, green 4em);

(en even te zorgen dat de hoogte van een "streep" matches met de hoogte van een <tr>).

Maar zelf zou ik gewoon met JS aan de gang gaan - als je dat toch al gebruikte om per regel te kijken of ie wel/niet verborgen moet worden (teller bijhouden en indien teller % 2 dan class toevoegen / anders weghalen).

Snel even getest en inderdaad in 1° instantie werkt deze oplossing.

Heb ik natuurlijk weer pech dat sommigen meer dan 1 telefoonnummer of e-mailadres hebben.
javascript, of zoutzuur, zal dan toch de enige oplossing zijn. Ik wou gewoon de browser zelf het werk laten doen.

Toch aan allen bedankt die probeerden mee te werken.

Jan

Ik kan me voorstellen dat er mensen zijn die niet bevriend zijn met JS en er zo ver mogelijk van willen blijven, dat geldt in ieder geval voor mijn persoon.
Maar tegenwoordig is JS in elke brower actief, en als het nog kan moet je echt moeite doen om het uit te zetten via een speciaal instellingenscherm. En omdat je JS toch al gebruikt om te filteren, kan je net zo goed een class 'even' toevoegen aan de rij die je filtert. In je JS die de rij controleert kan je iets opnemen als:

...
let iRij = 0;
let verborgen = false;
// ...
for(/* ... */) {
  // ...
  if (verborgen) {continue;}
  if (0 === iRij % 2) {
    rij.classList.add('even');
  } else {
    rij.classList.remove('even');
  }
  iRij++;
}

En vervolgens in de CSS iets als:

@media screen {
  /* ... */
  tr th,
  tr td {
    background:white;
  }
  tr.even th,
  tr.even td {
    background:lightgrey;
  }
}

Je zult bovenstaande code moeten aanpassen aan je eigen situatie, heel moeilijk zal dat niet zijn.