Change field back ground colour on a tabular report

[Trojan]

Hi

I'm trying to change the back ground colour for fields in a tabular report: using the following:

<span id="row[@field:Job_Card_Number]">[@field:Progress]</span>

<script>
if([@field:Progress]=="Open"
{
document.getElementById("[@field:Job_Card_Number]").Style.color="#444";
}

</script>

But mot working

[CoopperBackpack]

Hello @Trojan,

You may use another approach from this post 

In your case, this should be a code in the Footer section of the Results page (disable the HTML editor before passing the code):
 

<script>
    document.addEventListener('DataPageReady', colorHandler);

    function colorHandler() {

        const progressField = document.querySelectorAll('td:nth-child(2)'); // 2 is the position of the requred field, change this value if needed

        progressField.forEach(element => {
         if (element.innerHTML === 'Open') {
                element.style.backgroundColor = '#444';
            } 
        });
  document.removeEventListener('DataPageReady', colorHandler);
};
</script>

By the field position, I mean this: 

If you need further assistance, feel free to update this thread. 

[Trojan]

Thank you vey much

[Trojan]

Can you please show me the code to modify addition field - so progress is sorted - I just need to do two more

[CoopperBackpack]

Hello @Trojan,

Are those fields Text fields?

<script>
document.addEventListener('DataPageReady', colorHandler);

function colorHandler() {

     const progressField = document.querySelectorAll('td:nth-child(2)'); // 2 is the position of the requred field, change this value if needed
     progressField.forEach(element => {
         if (element.innerHTML === 'Open') {
              element.style.backgroundColor = '#444';
         } 
    });

     const secondField = document.querySelectorAll('td:nth-child(3)'); // 3 is the position of the requred field, change this value if needed
     secondField.forEach(element => {
          if (element.innerHTML === 'Deleted') {
              element.style.backgroundColor = '#108fb3';
         } 
    });

     const thirdField = document.querySelectorAll('td:nth-child(4)'); // 4 is the position of the requred field, change this value if needed
     thirdField.forEach(element => {
          if (element.innerHTML === 'Active') {
              element.style.backgroundColor = '#d9c1c9';
        } 
    });

document.removeEventListener('DataPageReady', colorHandler);
};
</script>

Please change the numbers that stand for the position of the field.

Also, please change the condition and the color

If you need further assistance please let me know. 

[Trojan]

Thank you very much CoppperBackpach