changing background color if column value is 30% or greater

[Hiperf]

I'm trying to change the color of a row based on column 6 if the value is 30% or greater, here's my code:
 

<script>
const backgroundColor = '#ffa093'
const numberOfColumnForCondition = '6';
const condition >= '30';

document.addEventListener('DataPageReady', function(event) {
let lines = document.querySelectorAll('tr[data-cb-name="data"]');
for (let line of lines) {
  if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition) {
    line.style.backgroundColor = backgroundColor;
  }
}
})
</script>

[CoopperBackpack]

Hello @Hiperf,

The script doesn't work due to the condition declared as
 const condition >= '30'.

If you would like to store a condition in a variable, it should be assigned with the 'equal' sign:  const condition =  '30'.
A comparison should be made inside the 'if' statement.

Please note that to make the comparison reliable you need to convert the text from the 6th column to a number. For that, you can apply the parseFloat() function. This will convert the text to a number even if you apply formatting and use the percentage sign on the DataPage.

<script>
const backgroundColor = '#ffa093'
const numberOfColumnForCondition = '6';
const condition = '30';

document.addEventListener('DataPageReady', conditionalColorHandler)

function conditionalColorHandler() {

    const lines = document.querySelectorAll('tr[data-cb-name="data"]');

    lines.forEach(line => {
                   
        if (parseFloat(line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText) >= condition) {                                 
                line.style.backgroundColor = backgroundColor;
        }  
    });
        document.removeEventListener('DataPageReady', conditionalColorHandler)
    }
</script>  

[Hiperf]

Thanks CoopperBackpack! Still having an issue, I think my syntax is wrong.

<script>
const backgroundColor = '#ffa093';
const numberOfColumnForCondition = '6'; // Zero-based index for the 7th column
const condition = '30'; // Assuming a numerical comparison

document.addEventListener('DataPageReady', conditionalColorHandler);

function conditionalColorHandler() {
  const lines = document.querySelectorAll('tr[data-cb-name="data"]');

  lines.forEach(line => {
    const targetCell = line.querySelector(`td:nth-child(${numberOfColumnForCondition + 1})`); // Adjust for 1-based indexing
    const cellText = targetCell.textContent;
    const cellNumber = parseFloat(cellText.replace('%', '')); // Remove % if applicable

    if (cellNumber >= condition) {
      line.style.backgroundColor = backgroundColor;
    }
  });

  // Remove the event listener after processing all lines
  document.removeEventListener('DataPageReady', conditionalColorHandler);
}
</script>

 

[CoopperBackpack]

Hello @Hiperf,

First of all,  please note that the indexes of the columns are not zero-based. They are counted starting from 1. In case you have bulk editing options enabled, they are counted as the 1st column., so they should be taken into consideration. 

And, in your script, this part should return 61, since you concatenate a string '6' and an integer (1): `td:nth-child(${numberOfColumnForCondition + 1})`

If the column with % is the 7th column, just assign the correct digit in the numberOfColumnForCondition variable (in your case, it is 7)

The script I provided also should work, just use the correct number for the numberOfColumnForCondition.

<script>
const backgroundColor = '#ffa093'
const numberOfColumnForCondition = '7';
const condition = '30';

document.addEventListener('DataPageReady', conditionalColorHandler)

function conditionalColorHandler() {

    const lines = document.querySelectorAll('tr[data-cb-name="data"]');

    lines.forEach(line => {
                   
        if (parseFloat(line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText) >= condition) {                                 
                line.style.backgroundColor = backgroundColor;
        }  
    });
        document.removeEventListener('DataPageReady', conditionalColorHandler)
    }
</script>