基于列值更改的备用表格行背景颜色

Question

I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.

UPDATED EXPLANATION: When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...

As always, any help you can give would be greatly appreciated!!

 tbody tr { background: aliceblue; } .altColor { background: lightgreen; }

 <div id="banner-message"> <table> <thead> <tr> <th>Key</th> <th>val</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>3</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> </tbody> </table> </div>

Answer 1

You can alternate color on a table with the :nth-child selector and the odd and even rules.

More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html

Try something like this:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Answer 2

I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.

See the Snippet below:

 $(document).ready(function(){ $("#banner-message tbody tr").each(function() { if(parseInt($(this).find("td").first().html()) % 2 == 0){ $(this).addClass("altColor"); } }); let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html()); let currentClass = ''; $("#banner-message2 tbody tr").each(function() { if(prevValue != parseInt($(this).find("td").first().html())){ (currentClass=='')?currentClass = 'altColor':currentClass=''; } $(this).addClass(currentClass); prevValue = parseInt($(this).find("td").first().html()); }); });

 tbody tr { background: aliceblue; } .altColor { background: lightgreen; } div { display:inline-block; padding:10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> Based on the Even/Odd values <table> <thead> <tr> <th>Key</th> <th>val</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>3</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> </tbody> </table> </div> <div id="banner-message2"> Based on the value change <table> <thead> <tr> <th>Key</th> <th>val</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>3</td> <td>1</td> </tr> <tr> <td>3</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> </tbody> </table> </div>

I hope this will help you :)

Answer 3

If you want to get the whole string in column use

$(document).ready(function(){
    //let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
    let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
    console.log(prevValue);
    let currentClass = '';
    $("#banner-message2 tbody tr").each(function() {
        if(prevValue != $(this).find("td:first").html()){
        (currentClass=='')?currentClass = 'altColor':currentClass='';
        }
        $(this).addClass(currentClass);
        prevValue = $(this).find("td:first").html();
    });
});