Set Hierarchy of Importance For Background Color

[pmcfarlain]

I'd like to have a colored table that can highlight past due items. This is the code I have in an HTML block that highlights the row of past due dates and turns the font color red.

<div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div>
<script>
var isi = document.getElementById("visi[@field:lines_Line_Number]");
if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){

isi.parentNode.parentNode.style.backgroundColor = 'yellow'; //background color

isi.style.color="red"; //font color
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

Meanwhile, this is part of the color I have in my header that turns the column headers and background different colors.

style type="text/css">[class*=cbResultSetHeaderCell]:nth-child(1) {

background: #3377FF !important;

} 
td[class*="cbResultSetData"]:nth-of-type(1){

background-color: #4D88FF !important;

}
[class*=cbResultSetHeaderCell]:nth-child(2) {

background: #1966FF !important;

} 
td[class*="cbResultSetData"]:nth-of-type(2){

background-color: #3377FF !important;

}
[class*=cbResultSetHeaderCell]:nth-child(3) {

background: #0055FF !important;

} 
td[class*="cbResultSetData"]:nth-of-type(3){

background-color: #1966FF !important;

}
[class*=cbResultSetHeaderCell]:nth-child(4) {

background: #cc0000 !important;

} 
td[class*="cbResultSetData"]:nth-of-type(4){

background-color: #E60000 !important;

}
[class*=cbResultSetHeaderCell]:nth-child(5) {

background: #cc0000 !important;

} 

Here is the result of this code:

Clearly, the highlight works as it applies to uncolored columns. How do I alter the code so that the highlight is prioritized and will override any existing color?

[TellMeWhy]

2 hours ago, pmcfarlain said:

I'd like to have a colored table that can highlight past due items. This is the code I have in an HTML block that highlights the row of past due dates and turns the font color red.

<div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div>
<script>
var isi = document.getElementById("visi[@field:lines_Line_Number]");
if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){

isi.parentNode.parentNode.style.backgroundColor = 'yellow'; //background color

isi.style.color="red"; //font color
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

Meanwhile, this is part of the color I have in my header that turns the column headers and background different colors.

style type="text/css">[class*=cbResultSetHeaderCell]:nth-child(1) {

background: #3377FF !important;

} 
td[class*="cbResultSetData"]:nth-of-type(1){

background-color: #4D88FF !important;

}
[class*=cbResultSetHeaderCell]:nth-child(2) {

background: #1966FF !important;

} 
td[class*="cbResultSetData"]:nth-of-type(2){

background-color: #3377FF !important;

}
[class*=cbResultSetHeaderCell]:nth-child(3) {

background: #0055FF !important;

} 
td[class*="cbResultSetData"]:nth-of-type(3){

background-color: #1966FF !important;

}
[class*=cbResultSetHeaderCell]:nth-child(4) {

background: #cc0000 !important;

} 
td[class*="cbResultSetData"]:nth-of-type(4){

background-color: #E60000 !important;

}
[class*=cbResultSetHeaderCell]:nth-child(5) {

background: #cc0000 !important;

} 

Here is the result of this code:

Clearly, the highlight works as it applies to uncolored columns. How do I alter the code so that the highlight is prioritized and will override any existing color?

does "yellow !important" not work? It probably wont, I guess, since that's applying background color to tr instead of td, try the method I gave you on the other post where all font colors become red, try changing style.color to backgroundColor and see if it prioritizes the script's color

[TellMeWhy]

35 minutes ago, pmcfarlain said:

<div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div>
<script>
var isi = document.getElementById("visi[@field:lines_Line_Number]");
if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){

for (var i=0;i < elems.length;i++){
elems[i].style.setProperty("background-color", "yellow", "important");

}

isi.style.color="red"; //font color
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

Nothing from this code either

seems like you're missing 

var elems = isi.parentNode.parentNode.querySelectorAll("td");

it's set just above the for loop

[pmcfarlain]

15 hours ago, TellMeWhy said:

does "yellow !important" not work? It probably wont, I guess, since that's applying background color to tr instead of td, try the method I gave you on the other post where all font colors become red, try changing style.color to backgroundColor and see if it prioritizes the script's color

Same result. Here's what I put, let me know if I did it wrong.

isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.backgroundColor="yellow";

 

[TellMeWhy]

1 hour ago, pmcfarlain said:

Same result. Here's what I put, let me know if I did it wrong.

isi.parentNode.parentNode.querySelector("td:nth-child(1)").style.backgroundColor="yellow";

 

Try "yellow !important" , also try the loop one, that's what goes through all the td, that one is for a single td (column)

[pmcfarlain]

22 hours ago, TellMeWhy said:

Try "yellow !important" , also try the loop one, that's what goes through all the td, that one is for a single td (column)

Nothing from this code:

<div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div>
<script>
var isi = document.getElementById("visi[@field:lines_Line_Number]");
if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){

var elems = isi.parentNode.parentNode.querySelectorAll("td");

for (var i=0;i < elems.length;i++){
elems[i].backgroundColor="yellow !important";

}

isi.style.color="red"; //font color
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

Is this what you meant?

[TellMeWhy]

1 hour ago, pmcfarlain said:

Nothing from this code:

<div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div>
<script>
var isi = document.getElementById("visi[@field:lines_Line_Number]");
if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){

var elems = isi.parentNode.parentNode.querySelectorAll("td");

for (var i=0;i < elems.length;i++){
elems[i].backgroundColor="yellow !important";

}

isi.style.color="red"; //font color
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

Is this what you meant?

try this one inside the for loop, it seems that !important does not work there 

elems[i].style.setProperty("background-color", "yellow", "important");

 

[pmcfarlain]

4 hours ago, TellMeWhy said:

try this one inside the for loop, it seems that !important does not work there 

elems[i].style.setProperty("background-color", "yellow", "important");

 

<div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div>
<script>
var isi = document.getElementById("visi[@field:lines_Line_Number]");
if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){

for (var i=0;i < elems.length;i++){
elems[i].style.setProperty("background-color", "yellow", "important");

}

isi.style.color="red"; //font color
}
else{
isi.parentNode.parentNode.style.backgroundColor = '#NoColor';
}
</script>

Nothing from this code either

[pmcfarlain]

That works perfectly! Thanks a bunch!!