Jump to content
  • 0

Styling column based on else if


Mikey
 Share

Question

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!!

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

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

Link to comment
Share on other sites

  • 0

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';
}

Link to comment
Share on other sites

  • 0

</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>

Link to comment
Share on other sites

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

 

image.png.8f79e9830cf0e40736b86fc5f5e86582.png

 

image.thumb.png.8e674b61b0fef80f3f3c65928b12c518.png

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...