Add color to specifc list cells after grouping by is applied

Question

Alright ive searched a ton of different threads on here so far with no luck.

I normally modify the cells in a list with red/green depending on the content within the list item column in this case if the user says yes its green. If the user says no its red. The code works within the all items view, but after I apply a group by column to the list the code does not work. Any ideas?

CSS

<style >
.no {
    background-color: lightpink;
    text-align: center;
    border-style: solid;
    border-color: black;
    vertical-align: middle;
    font-family: Rockwell;
    font-size: 16px;
}


.yes {
    background-color: darkseagreen;
    text-align: center;
    border-style: solid;
    border-color: black;
    vertical-align: middle;
    font-family: Rockwell;
    font-size: 16px;
}

</style >

Solved Using jQuery

<script type='text/javascript'>
        $(document).ready(function(){

        //All docs view functions
        $(".ms-vb2:contains(No)").addClass("no");
        $(".ms-vb2:contains(Yes, see attachment)").addClass("yes");

        //Targeting achor on click
        $('.ms-gb').click(function (e){ 
            $(".ms-vb2:contains(No)").addClass("no");
            $(".ms-vb2:contains(Yes, see attachment)").addClass("yes");

        });
    </script>

Answer 1

You can try the below code for conditional color formatting code in SharePoint :

$(document).ready(function(){

$Text = $(“td .ms-vb2:contains(‘Approved’)”).filter(function() {

return $(this).text() == “Approved”;})

$Text.parent().css(“background-color”, “#00FF66”);

$Text = $(“td .ms-vb2:contains(‘Decline’)”);

$Text.parent().css(“background-color”, “#FF0000”);

});

You may refer the below article for more details steps:

Changing colors in SharePoint List Rows – Conditional Formatting in SharePoint 2013/Online