Jump to content
  • 0

Set Hierarchy of Importance For Background Color


pmcfarlain
 Share

Question

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:

720262255_ScreenShot2021-07-20at2_33_01PM.png.9a3201a4ca1459e463d116aa2414a023.png

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?

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 1
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:

720262255_ScreenShot2021-07-20at2_33_01PM.png.9a3201a4ca1459e463d116aa2414a023.png

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

Link to comment
Share on other sites

  • 0
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";

 

Link to comment
Share on other sites

  • 0
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)

Link to comment
Share on other sites

  • 0
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?

Link to comment
Share on other sites

  • 0
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");

 

Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

  • 1
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...