Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Set table coloum background color on a condition using jquery

0.00/5 (No votes)
30 Jun 2011 1  
Normal 0 false false false EN-US X-NONE X-NONE

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

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");
        });

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here