{"id":688,"date":"2011-08-24T18:39:00","date_gmt":"2011-08-24T18:39:00","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=688"},"modified":"2023-09-11T15:32:00","modified_gmt":"2023-09-11T21:32:00","slug":"how-to-add-conditional-formatting-to-your-web-apps-with-jquery","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=how-to-add-conditional-formatting-to-your-web-apps-with-jquery","title":{"rendered":"How to add conditional formatting to your web apps with jQuery"},"content":{"rendered":"\n

In this article, I\u2019m going to explain how to make important data in your web reports stand out using conditional formatting. With just a little jQuery, you can make your current web reports easier to read and understand.<\/p>\n\n\n\n

Implementation<\/h2>\n\n\n\n

Before I begin, here\u2019s some quick background information for those that aren\u2019t familiar with jQuery: It is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It\u2019s one of the most popular javascript libraries, and widely used across the web. In other words, it\u2019s a simpler way to include javascript in your web apps.<\/p>\n\n\n\n

So, what is conditional formatting, and how does jQuery tie into this whole thing? Here\u2019s my own simple definition: Conditional formatting adds formatting to your data based on certain criteria, or conditions. For example, look at this data table and quickly tell me which customers had sales below $300,000.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

That\u2019s not easy, is it? Figuring out anything of importance is much too difficult because all the data looks the same. Now, take a look at this table and answer the same question. (Red is bad, green is good).<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

See how much easier that is to read and understand? Within seconds, I know the best and worst accounts, all thanks to conditional formatting.<\/p>\n\n\n\n

Demo<\/h3>\n\n\n\n

Okay, let\u2019s get started. First, let\u2019s take a look at what we\u2019re building. Here\u2019s a link to a conditional formatting demo<\/strong><\/a> that I created. Click the links on the page to turn formatting on or off. Make sense so far? Okay, let\u2019s get into it:<\/p>\n\n\n\n

If you take a look at the source code in that demo, you\u2019ll notice there are essentially three elements to the application: A little jQuery, a few styles, and a table of data. I\u2019m going to walk you through the code from the bottom up. I\u2019ll quickly explain the table data and the styles, and then get into the jQuery.<\/p>\n\n\n\n

First, let\u2019s take a look at the table. Here are two rows from the table. I\u2019m only showing two because they are all essentially the same thing:<\/p>\n\n\n\n

<tr class=\"one\">\n\t<td>100007<\/td>\n \t<td>A-1 Cycle City<\/td>\n \t<td>Amy Schilling<\/td>\n \t<td>United States<\/td>\n \t<td>840677<\/td>\n<\/tr>\n<tr class=\"two\">\n\t<td>100004\n \t<td>A\/B Cycle Shoppe<\/td>\n \t<td>Rick Sterling<\/td>\n \t<td>United States<\/td>\n \t<td>700136<\/td> \n <\/tr>\t<\/code><\/pre>\n\n\n\n
This is a very basic table, but I want to point out two things. First, we will be applying conditional formatting to the 5th cell (<td><\/code>) in each row. You\u2019ll understand why that\u2019s important in a second. Secondly, you don\u2019t need to worry about the classes on each row (<tr><\/code>). <\/p>\n\n\n\n
Those are only there to make alternating rows a slightly different color, which improves readability. If you want to see the styles for those rows, look at the code below:<\/p>\n\n\n\n
tr.one {background-color: #dbdbdb;}\ntr.two {background-color: #efefef;}<\/code><\/pre>\n\n\n\n
That\u2019s pretty much all you need to understand about the table and styles in this demo. <\/p>\n\n\n\n
Breaking down the code<\/h3>\n\n\n\n
Now, let\u2019s get into the jQuery. I\u2019ve pasted all of the code below. This is all the jQuery necessary to add conditional formatting to this page.<\/p>\n\n\n\n
 First, look over the code, and then I will walk you through each part.<\/p>\n\n\n\n
<\nscript>\n\n    $(document).ready(function() {\n        $(\"a.on\").click(function() {\n            $('table td:nth-child(5)').each(function() {\n                var Sales = $(this).text();\n                if ((Sales > 0) && (Sales < 250000)) {\n                    $(this).css('backgroundColor', '#f76e6e');\n                } else if ((Sales > 250000) && (Sales < 500000)) {\n                    $(this).css('backgroundColor', '#edb949');\n                } else if ((Sales > 500000) && (Sales < 750000)) {\n                    $(this).css('backgroundColor', '#f2f381');\n                } else {\n                    $(this).css('backgroundColor', '#99faa0');\n                }\n            });\n            return false;\n        });\n        $(\"a.off\").click(function() {\n            $('table td:nth-child(5)').each(function() {\n                $(this).css('backgroundColor', 'transparent');\n            });\n        });\n    });\n<\/script><\/code><\/pre>\n\n\n\n
The necessary script that references your external JavaScript file will be automatically inserted into the JS page of your application from m-Painter via a line similar to this:  <\/p>\n\n\n\n
<script id=\"app-js\" type=\"text\/javascript\" src=\"\/mrcjava\/mrcclasses\/MRCWORKLIB\/R00010\/js\/R00010.js\"><\/script><\/code><\/pre>\n\n\n\n
The function begins with this bit of code:<\/p>\n\n\n\n
$(document).ready(function() {<\/code><\/pre>\n\n\n\n
This tells the page to start running this function when the page is loaded.<\/p>\n\n\n\n
On the next line, you\u2019ll notice that I\u2019ve added a click <\/code>function:<\/p>\n\n\n\n
$(\"a.on\").click(function(){<\/code><\/pre>\n\n\n\n
This line tells the document to run the conditional formatting function only <\/strong>when the hyperlink named with a class of \u201con\u201d is clicked. I added this so you could turn conditional formatting on or off, but you don\u2019t really need it if you want formatting to always be on.<\/p>\n\n\n\n
The next two lines are quite important, and I grouped them together because they directly relate to each other:<\/p>\n\n\n\n
$('table td:nth-child(5)').each(function() {\nvar Sales = $(this).text();<\/code><\/pre>\n\n\n\n
With the first line, I\u2019m telling the document to find table cells (td) within the table, but to only find the 5th cell in each row (the cell that contains sales data). This is important for one simple reason: Most jQuery methods require that you assign a class to the cells you want to alter. This method doesn\u2019t force you to alter any of your existing data. In other words, you can use this code without adding anything to your current web apps. <\/p>\n\n\n\n
Getting back to the code, let\u2019s take a look at the second line above. With the second line, I\u2019ve assigned the fifth cell in every row with the name \u201cSales\u201d. This makes it easier to reference going forward.<\/p>\n\n\n\n
In the next line, we get into the actual formatting. Here\u2019s the first condition:<\/p>\n\n\n\n
if ((Sales > 0) && (Sales < 250000)) {\n\t$(this).css('backgroundColor', '#f76e6e'); \n}<\/code><\/pre>\n\n\n\n
In plain English, here\u2019s what this is saying: <\/p>\n\n\n\n
If the variable \u201cSales\u201d (5th cell in each row) is greater than 0 and less than 250,000, change the background color to \u201c#f76e6e\u201d (a shade of red). <\/em><\/p>\n\n\n\n
Now, any sales numbers under 250,000 will be red.<\/p>\n\n\n\n
else if((Sales > 250000) && (Sales < 500000)) {\n\t$(this).css('backgroundColor', '#edb949'); \n}<\/code><\/pre>\n\n\n\n
Again, here\u2019s the code in plain English: <\/p>\n\n\n\n
If the first condition isn\u2019t true, then check to see if the variable \u201cSales\u201d is greater than 250,000 but less than 500,000. If so, change the background color to \u201c#edb949\u201d <\/em>(a shade of orange).<\/em><\/p>\n\n\n\n
The next condition is the same as the previous two, but changes the background color to a shade of yellow if \u201cSales\u201d falls within the 500,000 – 750,000 range:<\/p>\n\n\n\n
else if((Sales > 500000) && (Sales < 750000)) {\n\t$(this).css('backgroundColor', '#f2f381'); \n}<\/code><\/pre>\n\n\n\n
Finally, the last condition only applies if none of the other conditions are true:<\/p>\n\n\n\n
else {\n$(this).css('backgroundColor', '#99faa0'); \n}<\/code><\/pre>\n\n\n\n
Basically, this says: If none of the above are true, change the background color to \u201c#99faa0\u201d (a shade of green). If none of the above conditions are true, than \u201cSales\u201d must be over 750,000, which is good.<\/p>\n\n\n\n
The rest of the code isn\u2019t important to your web apps if you want conditional formatting to always be turned on, but I\u2019ll quickly explain it:<\/p>\n\n\n\n
event.preventDefault();<\/code><\/pre>\n\n\n\n
This ensures that the conditional formatting will remain after I\u2019ve clicked the link. If I didn\u2019t put it there, the formatting would quickly flash on the table and then disappear, and I don\u2019t want that.<\/p>\n\n\n\n
The next bit of code turns conditional formatting off.<\/p>\n\n\n\n
$(\"a.off\").click(function() {\n    $('table td:nth-child(5)').each(function() {\n        $(this).css('backgroundColor', 'transparent');\n    });\n});<\/code><\/pre>\n\n\n\n
In short, this indicates that when the link with the \u201coff\u201d class is clicked, the fifth cell in each row should have a transparent background.<\/p>\n\n\n\n
Now, before I wrap this up, I\u2019d like to explain one more thing that might help you. What if you want the entire row to change colors instead of that one cell? With jQuery, this is simple. You just need to tell each condition to apply the background color to the cell\u2019s parent (the row). Here\u2019s how this would look:<\/p>\n\n\n\n
if ((Sales > 0) && (Sales < 250000)) {\n\t$(this).parent().css('backgroundColor', '#f76e6e'); \n}<\/code><\/pre>\n\n\n\n
See what I did there? I just added \u201cparent().\u201d in between \u201c(this)\u201d and \u201ccss\u201d. This simple change will apply the conditional formatting to the entire row.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
That\u2019s it! With minimal work, you can add conditional formatting to your web apps using the jQuery code outlined above. With this method, you will make your web apps easier to read and understand. <\/p>\n","protected":false},"excerpt":{"rendered":"
In this article, I\u2019m going to explain how to make important data in your web reports stand out using conditional formatting. With just a little jQuery, you can make your current web reports easier to read and understand. Implementation Before I begin, here\u2019s some quick background information for those that…<\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-688","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=688"}],"version-history":[{"count":13,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/688\/revisions"}],"predecessor-version":[{"id":12123,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/688\/revisions\/12123"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=688"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=688"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}