Hinzufügen alternierende Tabellenzeilenfarbe basierend auf dem Datum?

Question

Ich habe eine Tabelle in HTML und die erste Spalte in jeder Zeile enthält ein Datum. Ich möchte eine Art Trennung nach Datum geben. So wären alle Zeilen mit dem heutigen Datum dunkelgrau, die gestrige Zeile wäre hellgrau und dann vor zwei Tagen wieder grau und so weiter.

Gibt es eine einfache Möglichkeit, dies zu tun?

Dank

Answer 1

haben Zeilen eine andere Farbe (mit mehreren Reihen das gleiche Datum haben) abwechselnd, werden Sie jQuery verwenden müssen durch alle Tabellenzeilen zu wiederholen um zu überprüfen, ob es diese Zeile Farbe sollte oder nicht .

Unten ist die jQuery, HTML und CSS für ein Beispiel.

// iterate over each row 
 
var tableDate = $("#MyTable tbody").parents('tr:first').find('td:first').text(); 
 
var shouldColor = true 
 
$("#MyTable tbody tr").each(function(i) { 
 
    // find the first td in the row 
 
    var value = $(this).find("td:first").text(); 
 
    // display the value in console 
 
\t \t \t \t if (value == tableDate) { 
 
     \t if (shouldColor == true) { 
 
     \t \t $('#MyTable tbody tr:nth-child(' + (i + 1) + ')').addClass("alternate"); 
 
      } 
 
      
 
     } else { 
 
     \t \t if (shouldColor == false) { 
 
      \t shouldColor = true 
 
       $('#MyTable tbody tr:nth-child(' + (i + 1) + ')').addClass("alternate"); 
 
      } else { 
 
      \t shouldColor = false 
 
      } \t 
 
     } 
 
    \t \t 
 
tableDate = value 
 
});

#MyTable { 
 
\t \t width:100%; 
 
\t \t border-collapse:collapse; 
 
\t } 
 
#MyTable td { 
 
\t \t padding:7px; border:blue 1px solid; 
 
\t } 
 

 
#MyTable tr { 
 
\t \t background: light-grey; 
 
\t } 
 
    
 
    
 

 
#MyTable .alternate { 
 
\t \t background: red; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<table id="MyTable" > 
 
    <tbody> 
 
    <tr> 
 
    <td>4/4/2016</td>  <td>Running</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>5/4/2016</td>  <td>Running</td> 
 
    </tr> 
 
    <tr> 
 
    <td>6/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>6/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>6/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>6/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>7/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>7/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>8/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>9/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>10/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>11/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>11/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>12/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>12/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>12/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>13/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>13/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    <tr> 
 
    <td>13/4/2016</td>  <td>Swimming</td> 
 
    </tr> 
 
    
 
</tbody> 
 
</table>