rijen om en om gekleurd, alleen zichtbare rijen

Status
Niet open voor verdere reacties.
M

mariannevanh

Terugkerende gebruiker
Lid geworden
14 dec 2004
Berichten
2.085
Ik heb een tabel waarbij een aantal rijen verborgen dient te worden. Dat gaat goed in mijn ontwerp.
De overige zichtbare rijen wil ik graag om en om kleuren.
Maar als rij 278 verborgen is, hebben de rijen 264 en 311 dezelfde kleur.
Hoe kan ik alleen de zichtbare rijen om en om een kleur geven?

Code: 
<html>
<table tr:nth-of-type(odd) td {background-color: hsl(40, 20%, 50%);}>
<style>
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
</style>
  <tr>
    <td align="right">148</td>
    <td></td>
  </tr>
  <tr>
    <td align="right">184</td>
    <td></td>
  </tr>
  <tr>
    <td align="right">264</td>
    <td></td>
  </tr>
  <tr style='visibility:collapse'>
    <td align="right">278</td>
    <td></td>
  </tr>
  <tr>
    <td align="right">311</td>
    <td></td>
  </tr>
  <tr style='visibility:collapse'>
    <td align="right">341</td>
    <td></td>
  </tr>
</html>

Vriendelijke groet,
Marianne
 
Laatst bewerkt:
Hoi. Met css zal dit erg lastig worden, ik zie zo gauw geen mogelijkheid omdat je veel variaties kan hebben in opeenvolgende rijen. Je vraag is wel op te lossen met JavaScript.

Opmaak (zoals align) mag tegenwoordig niet meer in de html, dit hoort in een stylesheet, of als het weinig is in een <style> zoals hieronder. Gebruik bij voorkeur een class. Bijvoorbeeld class="collapse" verwijst naar .collapse in de style.
Code: 
<style>
.mvh td:first-child {
  text-align: right;
}
.mvh tr.collapse {
  visibility: collapse;
}
/* kleur1/kleur2 wordt in JavaScript geregeld */
.mvh tr.kleur1 {
  background: #fff;
}
.mvh tr.kleur2 {
  background: #ccc;
}
</style>

<script>
window.addEventListener("load", function(event) {
  let class1  = "kleur1";
  let class2  = "kleur2";
  let trClass = class1;
  let trs = document.querySelectorAll(".mvh tr:not(.collapse)");
  for (let i=0; i < trs.length; i++) {
    trClass = (trClass == class1) ? class2 : class1;
    trs[i].classList.add(trClass);
  }
});
</script>

<table class="mvh">
  <tbody>
    <tr>
      <td>148</td>
      <td>odd</td>
    </tr>
    <tr>
      <td>184</td>
      <td>even</td>
    </tr>
    <tr>
      <td>264</td>
      <td>odd</td>
    </tr>
    <tr class="collapse">
      <td>278</td>
      <td>even</td>
    </tr>
    <tr>
      <td>311</td>
      <td>odd</td>
    </tr>
    <tr class="collapse">
      <td>341</td>
      <td>even</td>
    </tr>
  </tbody>
</table>
 
Dankjewel voor de hulp. Mijn probleem is opgelost.
Ik heb nog niet genoeg kennis van style sheets, vandaar dat ik de opmaak nu nog doe in de HTML.

Vriendelijke groet,
Marianne
 
Tijd om je kennis bij te schaven ;)
 
Mijn probleem is opgelost.
Ik heb nog niet genoeg kennis van style sheets,
Klik om te vergroten...
Graag gedaan. Je doet jezelf echt een groot plezier door de html en css van elkaar te scheiden. Bij de super ligt een bloemkool ook niet bij de melk :p Voor de basiskennis is wat tijd nodig (valt op zich mee) , vooral zinvol als je "regelmatig" met webpagina's bezig bent.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan