change rows depending on the ordernumber in database

Question

I'm creating for my education-project a pizza-ordering website. With the help of the stackoverflow-community I've achieved already a lot - so thank you! But now I'm stuck and can't find any working solution to my problem.

Question

How can I change the row color alternating (white / grey / white / grey ...) depending on the ordernumber in the database(mysqli)? The ordernumber can be in more than one row, so I can not simple change the color row by row.

I've tried with jquery, but this works only if the ordering numbers remain always in the list (even/odd) ... if an order is cancelled, then it doesn't works anymore (see image with missing ordernumber 7)

Here is the code in jquery:

$(document).ready(function() {
var check = 0;
          
for(var i =0; i<= $("tr").length;i++){
          
$("tr").each(function(){
        
if(parseInt($(this).find("#bestnr").text())==check){
            
    if(check%2 == 0){
    
        $(this).css("background-color","white");    
    
    }else{
    
    $(this).css("background-color","#DCDCDC");    
    
    }
     
        }    

        });
          
          check +=1;

          }
        
});

Any ideas? Thanks for your help!

Answer 1

Since you're working with JQuery, something like this ought to do the trick - explanations in code comments.

$(document).ready(function() {

    // define the initial "previous order id" as 0 assuming
    // there will never be an order with id 0
    var previousOrderId = 0;
    var previousBgColour = '#dcdcdc';
    var thisBgColour;

    // loop the table rows
    $("tr").each(function() {

        // determine "this" row id (assuming bestnr is short for bestelnummer)
        // and that the text in that table cell *is* the order number
        // I've changed this to a class as an id HAS to be unique
        // you'll need to update your code to accommodate
        var thisOrderId = parseInt($(this).find(".bestnr").text());

        // define the background colour based on whether the order id has changed
        // if it has change it
        if(thisOrderId != previousOrderId) {
            thisBgColour = previousBgColour == '#dcdcdc' ? '#ffffff' : '#dcdcdc';
            previousBgColour = thisBgColour;
        }
        else {
            thisBgColour = previousBgColour;
        }
        $(this).css({'background-color' : thisBgColour});

        //update the previousOrderId to this id
        previousOrderId = thisOrderId;
    });
});

You're basically storing the previous order id and comparing it to the current order id - if the order id hasn't changed it'll use the previous background colour, if it has it'll flipflop it to the alternate colour.