Javascript 使用AngularJS调整列的背景色

Javascript 使用AngularJS调整列的背景色,javascript,html,css,angularjs,web-applications,Javascript,Html,Css,Angularjs,Web Applications,这是我的webapp,目前它查找当前日期所在的星期几,并在表上突出显示该天。它也会在从当前日期开始的两周内执行此操作 然而,我在下一部分遇到了麻烦,如果当前一天或两周后的一天是假日,我需要调整突出显示。现在,假日突出显示(紫色)覆盖了黄色突出显示,但我需要黄色突出显示7/5,因为7/4是假日 构成这些突出显示规则的业务规则如下:将突出显示当前日期,并突出显示2周后的日期。基本上,这10天期间的第一天和最后一天将以黄色突出显示。但是如果第一天或最后一天是假日,那么重点需要转移到第二天 有人能给我指

这是我的webapp,目前它查找当前日期所在的星期几,并在表上突出显示该天。它也会在从当前日期开始的两周内执行此操作

然而,我在下一部分遇到了麻烦,如果当前一天或两周后的一天是假日,我需要调整突出显示。现在,假日突出显示(紫色)覆盖了黄色突出显示,但我需要黄色突出显示7/5,因为7/4是假日

构成这些突出显示规则的业务规则如下:将突出显示当前日期,并突出显示2周后的日期。基本上,这10天期间的第一天和最后一天将以黄色突出显示。但是如果第一天或最后一天是假日,那么重点需要转移到第二天

有人能给我指出实现这一目标的正确方向吗?我不需要完整的答案,但如果你能朝着正确的方向轻推一下,我将不胜感激

这是我的密码:

Index.html
我不知道这是否是最好的方法,但我只是编辑了控制黄色突出显示的if语句。下面是所有这些陈述现在的样子:

if(prop == 'Tue2Wks')
            {
                if(today.getDay() == 1 && prop.HolMon2Wks !== null)
                {
                 return "highlightClass";
                }
                else if(today.getDay() == 2 && prop.HolTue2Wks !== null)
                {
                    return '';
                }
                else if(today.getDay() == 2)
                {
                    return "highlightClass";
                }
            }

当然,根据不同的日子,每一条都略有不同。

我不知道这是否是最好的方法,但我只是编辑了控制黄色突出显示的if语句。下面是所有这些陈述现在的样子:

if(prop == 'Tue2Wks')
            {
                if(today.getDay() == 1 && prop.HolMon2Wks !== null)
                {
                 return "highlightClass";
                }
                else if(today.getDay() == 2 && prop.HolTue2Wks !== null)
                {
                    return '';
                }
                else if(today.getDay() == 2)
                {
                    return "highlightClass";
                }
            }
当然,根据不同的日子,每一个都略有不同

body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: xx-small;
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
}

a{
    color: black;
    text-align: center;
    padding-left: 15px
}

table{
    border-collapse: collapse;
}

th{
    border: 1px solid #191919;
    padding-right: 10px;
    padding-left: 10px;
}

td{
    border: 1px solid #191919;
    padding-right: 10px;
    padding-left: 10px;
}

td{
    background-color: white;
}

hr {
    margin: 0;
    border-top: 1px solid #191919;
    width: 1409px;
}

.redClass {
    background-color: #ff8d80;
}

.blueClass {
    background-color: #9adcfc;
}

.grayClass {
    background-color: #e4e4e4;
}

.goldClass {
    background-color: #ffdf32;
}

.greenClass {
    background-color: #b0e89f;
}

.ptoClass {
    background-color: #52D08F;
}

.highlightClass {
    background-color: #FEF65B;
}


.hideClass {
    background-color: white;
    color: white;
}


#Today{
    background-color: #FEF65B;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 1px;
    border: 1px solid #FEF65B;
}

#PTO{
   background-color: #7DD961;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 1px;
    border: 1px solid #7DD961;
}

#Hol{
    background-color: #c3aed6;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 1px;
    border: 1px solid #c3aed6;
}
#header{
    background-color: #6fcdfc;
    font-size: 19px;
}

#print{
    background-color: white;
    margin-bottom: 1px;
    border: none;
}

#print2{
    border: none;
    background-color: white;
    align-content: right;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 1px;

}
/*
td:nth-child(1){
    border-left-color: #2F4F4F;
}
td:nth-child(2){
    border-right-color: #2F4F4F;
}
td:nth-child(3){
    border-right-color: #2F4F4F;
}
td:nth-child(4){
    border-right-color: #2F4F4F;
}
td:nth-child(9){
    border-right-color: #2F4F4F;
}
td:nth-child(14){
    border-right-color: #2F4F4F;
}
td:nth-child(19){
    border-right-color: #2F4F4F;
}

td:nth-child(20){
    border-right-color: #2F4F4F; 
}
td:nth-child(21){
    border-right-color: black;
}
*/
td:nth-child(n+3){
    font-weight:bold;
}

th:nth-child(n+22){
    display: none;
}

td:nth-child(n+22) {
    display: none;    
}



@media print{
    #print{
        display: none;
    }

    #print2{
        display: none;
    }

    #link{
        display: none;
    }

}
if(prop == 'Tue2Wks')
            {
                if(today.getDay() == 1 && prop.HolMon2Wks !== null)
                {
                 return "highlightClass";
                }
                else if(today.getDay() == 2 && prop.HolTue2Wks !== null)
                {
                    return '';
                }
                else if(today.getDay() == 2)
                {
                    return "highlightClass";
                }
            }