Styling column based on else if

[Mikey]

Hi, I have a tab report and can color the background of a specific column based on values. If I add > or  < i can only get two options.. what I want is style a specific color between two numbers and then everything else grey. Here is what I have so far.

calcfield1 > -31 specific color

calcfield1 between 2 numbers specific color  (between  -61 and -30)

everything else grey

 

</div>
<script>
var isi = document.getElementById('visi[@field:MarineID]').parentNode.parentNode;
if('[@calcfield:1#]' > "-31"){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#CC6666';
isi.querySelector('td:nth-child(8)').style.color = 'white';
}
else if('[@calcfield:1#]' > "-61" || '[@calcfield:1#]' < "-30"){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#FFFF99';
isi.querySelector('td:nth-child(8)').style.color = 'black';
}
else{
isi.querySelector('td:nth-child(8)').style.backgroundColor = 'grey';
isi.querySelector('td:nth-child(8)').style.color = 'white';
}
</script>

 

 

 

with this script above.. anything over -31 is correct color #CC666, but everything under -30 is the #FFFF99 color.. but if the number is say -100 it is still #FFFF99. Just need help getting the between numbers working....

 

 

Any suggestions. Again, it works when I do not have the else if between.. thank you!!

[TellMeWhy]

29 minutes ago, Mikey said:

Hi, I have a tab report and can color the background of a specific column based on values. If I add > or  < i can only get two options.. what I want is style a specific color between two numbers and then everything else grey. Here is what I have so far.

calcfield1 > -31 specific color

calcfield1 between 2 numbers specific color  (between  -61 and -30)

everything else grey

 

</div>
<script>
var isi = document.getElementById('visi[@field:MarineID]').parentNode.parentNode;
if('[@calcfield:1#]' > "-31"){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#CC6666';
isi.querySelector('td:nth-child(8)').style.color = 'white';
}
else if('[@calcfield:1#]' > "-61" || '[@calcfield:1#]' < "-30"){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#FFFF99';
isi.querySelector('td:nth-child(8)').style.color = 'black';
}
else{
isi.querySelector('td:nth-child(8)').style.backgroundColor = 'grey';
isi.querySelector('td:nth-child(8)').style.color = 'white';
}
</script>

 

 

 

with this script above.. anything over -31 is correct color #CC666, but everything under -30 is the #FFFF99 color.. but if the number is say -100 it is still #FFFF99. Just need help getting the between numbers working....

 

 

Any suggestions. Again, it works when I do not have the else if between.. thank you!!

Can you try removing the quotations? I know it works, but we're using numbers here, so, it would be more fitting to use it as a number, remove quotation from both the calc field and the numbers

[Mikey]

I removed the quotes, and basically same thing, although now it is either the > -31 color or grey.. the issues if getting it to determine the elsi if between 2 numbers...

 

else if('[@calcfield:1#]' > -61 || '[@calcfield:1#]' < -30){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#FFFF99';
isi.querySelector('td:nth-child(8)').style.color = 'black';
}

[Mikey]

I must have the else if statement wrong

 

[TellMeWhy]

19 minutes ago, Mikey said:

I must have the else if statement wrong

 

ah, maybe, use &&(AND) instead of II(OR)

[Mikey]

Sdly no go.. it is either the redish color or grey.. nothing for the inbetween numbers:

 

[Mikey]

</div>
<script>
var isi = document.getElementById('visi[@field:MarineID]').parentNode.parentNode;
if('[@calcfield:1#]' > -31){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#CC6666';
isi.querySelector('td:nth-child(8)').style.color = 'white';
}
else if('[@calcfield:1#]' > -61 && '[@calcfield:1#]' < -30){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#FFFF99';
isi.querySelector('td:nth-child(8)').style.color = 'black';
}
else{
isi.querySelector('td:nth-child(8)').style.backgroundColor = 'grey';
isi.querySelector('td:nth-child(8)').style.color = 'black';
}
</script>

[TellMeWhy]

9 minutes ago, Mikey said:

</div>
<script>
var isi = document.getElementById('visi[@field:MarineID]').parentNode.parentNode;
if('[@calcfield:1#]' > -31){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#CC6666';
isi.querySelector('td:nth-child(8)').style.color = 'white';
}
else if('[@calcfield:1#]' > -61 && '[@calcfield:1#]' < -30){
isi.querySelector('td:nth-child(8)').style.backgroundColor = '#FFFF99';
isi.querySelector('td:nth-child(8)').style.color = 'black';
}
else{
isi.querySelector('td:nth-child(8)').style.backgroundColor = 'grey';
isi.querySelector('td:nth-child(8)').style.color = 'black';
}
</script>

I tried it, and you need to remove the quotations on the calc fields, as well, not just the numbers

 

 

[Mikey]

Thank you so much!!! That was it! You rock as usual!!!

[Flowers4Algernon]

Hello! You may also want to utilize this forum post to style columns: