Javascript 使用AngularJS调整列的背景色
这是我的webapp,目前它查找当前日期所在的星期几,并在表上突出显示该天。它也会在从当前日期开始的两周内执行此操作 然而,我在下一部分遇到了麻烦,如果当前一天或两周后的一天是假日,我需要调整突出显示。现在,假日突出显示(紫色)覆盖了黄色突出显示,但我需要黄色突出显示7/5,因为7/4是假日 构成这些突出显示规则的业务规则如下:将突出显示当前日期,并突出显示2周后的日期。基本上,这10天期间的第一天和最后一天将以黄色突出显示。但是如果第一天或最后一天是假日,那么重点需要转移到第二天 有人能给我指出实现这一目标的正确方向吗?我不需要完整的答案,但如果你能朝着正确的方向轻推一下,我将不胜感激 这是我的密码: Index.htmlJavascript 使用AngularJS调整列的背景色,javascript,html,css,angularjs,web-applications,Javascript,Html,Css,Angularjs,Web Applications,这是我的webapp,目前它查找当前日期所在的星期几,并在表上突出显示该天。它也会在从当前日期开始的两周内执行此操作 然而,我在下一部分遇到了麻烦,如果当前一天或两周后的一天是假日,我需要调整突出显示。现在,假日突出显示(紫色)覆盖了黄色突出显示,但我需要黄色突出显示7/5,因为7/4是假日 构成这些突出显示规则的业务规则如下:将突出显示当前日期,并突出显示2周后的日期。基本上,这10天期间的第一天和最后一天将以黄色突出显示。但是如果第一天或最后一天是假日,那么重点需要转移到第二天 有人能给我指
我不知道这是否是最好的方法,但我只是编辑了控制黄色突出显示的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";
}
}