How to change the background color of webgrid using Jquery

i am trying to change the background color of row in webgrid when the status has changed then i am trying to do it with hidden field 

$(".gridtable tbody tr").each(function () {
           
            var hdnvalue = $(this).find('td').eq(13).find(':input').val();
            if (hdnvalue == "1") {
                $(this).addClass("JobStatus");
            }
            
            $(this).find('td').eq(13).remove();
        });

by using this when debugging with the browser it shows the class at <tr> tag but it isnot reflected in view. 

.JobStatus {
        background-color:red !important;
    }

Hi Siva,

Thanks for your post.

Siva_540

when debugging with the browser it shows the class at <tr> tag but it isnot reflected in view. 

As for your problem, I recommend to show us your complete code, then we will test your code to find the problem and fix it.

Besides, you could also refer to the following link which explain how to dynamically set row background color in a webgrid.

Hope it will be helpful to you.

Best Regards,

Fei Han

<div id="GridData">
            @grid.GetHtml(
    fillEmptyRows: false,
    alternatingRowStyle: "alternate-row",
               tableStyle: "gridtable",
    mode: WebGridPagerModes.All,
            firstText: "<< First",
            previousText: "< Prev",
            nextText: "Next >",
            lastText: "Last >>",
    columns: new[] {
             grid.Column(header: "Id", format: item => item.WebGrid.Rows.IndexOf(item) + 1),
        grid.Column("JobPosition",header: "Position",canSort: false),
        grid.Column("",header: "Skills",format:@<text><div style="height:225px !important; overflow:auto;width:80px">@item.RequiredSkills</div></text>,canSort: false),
        //grid.Column("ImageName",header: "Image Name",canSort: false),
        grid.Column("",header: "Responsibilities",format:@<text><div style="height:225px !important; overflow:auto;width:150px;">@item.Responsibilities</div></text>,canSort: false),
        grid.Column("Experience",header: "Exp",canSort: false),
        grid.Column("IndustryType",header: "Industry",canSort: false),
        grid.Column("Role",header: "Role",canSort: false),
        //grid.Column("hardwarenames",canSort: false),
        grid.Column("FunctionalArea",header: "FunctionalArea",canSort: false),
        grid.Column("Education",header: "Education",canSort: false),
         grid.Column("Compensation",header: "Compensation",canSort: false),
        grid.Column("JobType",header: "JobType",canSort: false),
         grid.Column("Location",header: "Location",canSort: false),
        grid.Column("NoOfJobs",header: "NoOfJobs",canSort: false),
        grid.Column(null,"Hidden",format:@<input type="hidden" name="hdnStatus" value="@item.Status" />),
        grid.Column("",
                    header: "Actions",
                    format: @<text>
                        @Html.ActionLink("Edit", "EditJob", new { id = item.JobID }, new { @class = "editDialog"/*, data_dialog_id = "edit-Dialog"*/ })
                        |
                        @Html.ActionLink("Delete", "DeleteJob", new { id = item.JobID }, new { @class = "confirmDialog" })
                    </text>
        )
})

</div>

and my jquery code is

 $(".gridtable thead tr th:contains('Hidden')").remove();
        $(".gridtable tbody tr").each(function () {
           
            var hdnvalue = $(this).find('td').eq(13).find(':input').val();
            if (hdnvalue == "2") {
                $(this).addClass("JobStatus");
            }
            
            $(this).find('td').eq(13).remove();
        });
        

Leave a Reply