javascript - 根据数据库中的订单号更改行

Question

我正在为我的教育项目创建一个披萨订购网站。在 stackoverflow 社区的帮助下，我已经取得了很多成就 - 谢谢!但现在我被困住了，找不到任何解决我问题的有效方法。

问题

如何根据数据库 (mysqli) 中的 ordernumber 交替更改行颜色(白色/灰色/白色/灰色...)？ ordernumber 可以在多行中，所以我不能简单地逐行更改颜色。

我已经尝试过使用 jquery，但这只有在订单号始终保留在列表中(偶数/奇数)时才有效......如果订单被取消，那么它就不再有效(参见缺少订单号的图像7)

这里是 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;

          }
        
});

有什么想法吗？感谢您的帮助!

Answer 1

既然您使用的是 JQuery，那么类似这样的东西应该可以解决问题 - 在代码注释中进行解释。

$(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;
    });
});

您基本上是在存储之前的订单 ID 并将其与当前订单 ID 进行比较 - 如果订单 ID 没有更改，它将使用之前的背景颜色，如果有的话。我会把它翻转成另一种颜色。