Set table coloum background color on a condition using jquery

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0in; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;}

There are some projects which require to high light rows which matches the filter criteria in grid view or table, but there are other requirements where we have to highlight the entire column based on the column cell text/header text.

This functionality/requirement can be handled by user when user perform a click operation on column header or hover mouse on to the column or when user loads the data he would specify the filter expression to high light a specific column header value.

This can be handled through JavaScript also which requires a complex script to be written, but with JQuery you can write the script easily.

Here in this example, column “PF” is highlighted.

Following is the Script used to highlight the column.

 $(document).ready(function() {
            var pfColumn = $("#Grid_CoWorking th:contains('PF')");
            var index = $("#Grid_CoWorking th").index(pfColumn);
            $("#Grid_CoWorking td:nth-child(" + (index + 1) + ")").css("background-color", "red");
        });

You must Login to comment.