Change background color row on Oracle APEX interactive grid using Java Script (DA)

I need to change a background row in Interactive grid (USING JAVA SCRIPT) when a data of idf_type_conv are > 0 and <> 73 and <> 100.

O using this code but I don't have success...

$('td[headers]="idf_type_conv"]').each(function() {
    if($(this).text() == '0'){
        $(this).closest('tr').find('td').css({"background-color":"red"});
    }
});

As you don't mention that you have any special case to handle, I suggest to use the native method:

1. In the action menu of the interactive grid, click format.In format we have the option to highlight.First we needs to select highlight.
   

2. On the highlight window, you need to define rules and whether the row or a specific column would be highlighted. You can also select colors accordingly.
   

Note: After you save your rules to highlight, make sure you save the interactive grid report as public and you can also create multiple rules to have multiple rules/colors.

The Highlight method is not a bad solution but, if you don't want to use the built-in, feature here is another solution.

Basically, you have to use this piece of code on every column you want to color (the code must be placed in the JavaScript Initialization Code attribute section):

function(options) {
    options.defaultGridColumnOptions = {
        cellCssClassesColumn:"idf_type_conv"
    }
    return options;
}

In this example, the "idf_type_conv" is a case when column is the report source query which determines the CSS class for the color you need. For example, if you have a page level custom CSS class called "RED" your case when would look like this:

case when idf_type > 0 then 'RED' end as idf_type_conv

You can specify the needed CSS class on the page level Inline CSS region, like this:

.RED{ 
    background-color: red;
}

I managed to make it work.

However, I don't have time to comment on the code, but it's not difficult and using the console.log in the variables gives you an idea of what's going on.

I needed to test the value of two pieces of data (in this case column 32 and 33), so APEX's native mode was not working.

(Follow the code below (in Execute JavaScript Code)):

var ig$ = apex.region("grid_static_id").widget();
var model = ig$.interactiveGrid("getViews", "grid").model;
var view = ig$.interactiveGrid("getViews", "grid");

//console.log(model);

var aux = 0;
var meta;
var fields;

model.forEach((x)=>{
    //console.log(x);
    //console.log(x[32]);
    //console.log(x[33]);
    if(x[32] > 0 && x[33] != 73 && x[33] != 100){
        meta = model.getRecordMetadata(aux);
        meta.highlight = "civil";
        //console.log(meta);

        fields = meta.fields = {};

        fields.TRIAGEM_IA = {};
        fields.TRIAGEM_IA.highlight = "civil";
        fields.VAZIA = {};
        fields.VAZIA.highlight = "civil";
        fields.NOM_TIPO_ABREVIADO = {};
        fields.NOM_TIPO_ABREVIADO.highlight = "civil";
        fields.TRIAGEM_IA = {};
        fields.TRIAGEM_IA.highlight = "civil";
        //(rest of the columns...)

        aux++;
    }

});

view.view$.grid("refresh");`

(Follow the code below (in CSS Page inline)):

//IN ROW BACKGROUND-COLOR DON'T FUNCTION...
.a-GV-row.civil{
    color: white;
}

.a-GV-cell.civil{
    background-color: gray!important;
}