问题

Question

我为我的教育项目创建了一个披萨订购网站。在stackoverflow-community的帮助下，我已经取得了很多成就 - 谢谢！但现在我陷入了困境，无法找到解决问题的方法。

问题

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

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

以下是jquery中的代码：

＆＃13;

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

＆＃13;

有什么想法吗？谢谢你的帮助！

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未更改，则会使用之前的背景颜色（如果有的话）将其翻转为替代颜色。

Answer 2

如果它只是交替颜色，你可以直接使用CSS而不用担心其他任何事情：

tr:nth-child(odd) { 
 background-color:white; 
} 
tr:nth-child(even) { 
 background-color:#DCDCDC; 
}

如果这在某种程度上依赖于后端的逻辑，我们可以看看在jQuery中添加一个类并通过CSS为这个类添加颜色

根据数据库

问题

2 个答案: