Color individual table cell based on value

[sc0tt]

I know that I can color an entire row using the table rowClass param in Sideview like so

<param name="rowClass">$row.fields.range$</param>

and then creating custom css

.Table tr.high td {
background-color:#e67918;
color:#fff;
}
but is there a way to color an individual cell based on a value?

Edit: To expand this question based on the below answers by gpradeepkumarreddy

I think I am missing something. Based on the suggestions below I have the following javascript in /apps/MyApp/appserver/static/application.js but I do not see any classes added to the table.

if ((Splunk.util.getCurrentView() == "live_dashboard") && Splunk.Module.SimpleResultsTable) {
Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
    onResultsRendered: function($super) {
        var retVal = $super();

this.myCustomHeatMapDecorator();
        return retVal;
    },

myCustomHeatMapDecorator: function () {

//Your code goes here
var sessions = (tds[1].innerText) ? tds[1].innerText : tds[1].textContent;
    if(sessions>1000){ //threshold to color
        {
        tr.find("td:nth-child(2)").addClass("colorRed"); //colorRed is a custom css class for a table cell
        }
    }
//end

}

[nick]

Actually, the particular answer we're commentiog on here will not work. The HTML of the modules is not on the page when application.js is loaded, and to do any custom JS here properly you have to do more work that is missing from this code sample, to basically patch/insert yourself into the rendering logic of the module.

[nlapier2]

I haven't been able to get this solution working. If I just have tr.addClass("colorRed"), it will work as specified and color the entire row red. But when I add in the "td:nth-child(x)" to make tr.find("td:nth-child(x)").addClass("colorRed") it doesn't highlight anything. Am I missing something?

[nick]

SplunkWeb only really looks on the filesystem for application.js when it's restarted. If there is one there when it restarts, it will try and serve it. If there was not one there when it restarted last, it will steadfastly ignore it. So I think just restart SplunkWeb and your code will start getting loaded. Also note that restarting just splunkweb (splunk restart splunkweb) will not cause anyone to lose auth. In fact the interruption in connectivity will be so brief that most users probably wont even notice it.

[pradeepkumarg]

if ((Splunk.util.getCurrentView() == "my_view") && Splunk.Module.SimpleResultsTable) {
    Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
        onResultsRendered: function($super) {
            var retVal = $super();
            
            this.myCustomHeatMapDecorator();
            return retVal;
        },      
            
myCustomHeatMapDecorator: function () {

//Your code goes here

}

Make sure you refer your current view in the place of my_view

 nth-child(1) 

is the first td element in a given tr

You'll have to modify that based on your need.

[sc0tt]

I'm unable to get the application.js to load. I have it in my_app/appserver/static/js/application.js and I've restarted splunkweb. Any ideas?

[sc0tt]

Many thanks. However, I'm having some trouble getting this to work. What does the "nth-child(1)" refer to?