JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<table border="1" style="width:100%">
  <tr class="gruppe_1">
    <td>A</td>
  </tr>
  <tr class="gruppe_1">
    <td>B</td>
  </tr>
  <tr class="gruppe_1">
    <td>C</td>
  </tr>
  <tr class="gruppe_2">
    <td>D</td>
  </tr>
  <tr class="gruppe_2">
    <td>E</td>
  </tr>
  <tr class="gruppe_2 zeile_f">
    <td>F</td>
  </tr>     
  <tr class="gruppe_2">
    <td>G</td>
  </tr>
  <tr class="gruppe_2">
    <td>H</td>
  </tr>     
</table> 
<br /><br /><br />
<span id="zeile_f_ausblenden">blende zeile F aus</span><br /><br /><br />
<span id="zeile_f_entfernen">entferne zeile F</span>

CSS

tr.gruppe_1:nth-child(even){
    background-color: red;
}
tr.gruppe_1:nth-child(odd){
    background-color: blue;
}
tr.gruppe_2:nth-child(even){
    background-color: yellow;
}
tr.gruppe_2:nth-child(odd){
    background-color: green;
}

JavaScript

$("#zeile_f_ausblenden").on("click",function(){
    $(".zeile_f").css("display","none");
});

$("#zeile_f_entfernen").on("click",function(){
    $(".zeile_f").remove();
});