Change color statuswise in GridView using JQuery

Sometimes we need to change color into Gridview statuswise. we can use RowDataBound event to do this but this can be easily done using JQuery.

Here is the code to do so...

<script language="javascript" type="text/javascript">
$(document).ready(function () {
            $('.Users).find("td:nth-child(5)").each(function () {
                if ($(this).children("span").html() == Active) {
                    $(this).css("color", "Green");
                    $(this).css("border-color", "Black");
                }
                else if ($(this).children("span").html() == InActive) {
                    $(this).css("color", "Red");
                    $(this).css("border-color", "Black");
                }
            });
        });
    </script>

Here in $('.Users') is a CssClass name of Gridview.

Give the CssClass attribute to your Gridview control like this. And use TemplateField and use Label element for that column.

<asp:GridView ID="gvUserList" runat="server" CssClass="Users"></asp:GridView>

If you are using BoundField in a Gridview control then you can try the following.

<script language="javascript" type="text/javascript">
$(document).ready(function () {
            $('.Users).find("td:nth-child(5)").each(function () {
                if ($(this).text() == Active) {
                    $(this).css("color", "Green");
                    $(this).css("border-color", "Black");
                }
                else if ($(this).text() == InActive) {
                    $(this).css("color", "Red");
                    $(this).css("border-color", "Black");
                }
            });
        });
    </script>

Note : Here nth-child(5) is column number and it starts from 1 not 0.