It was 5 maybe 6 years ago when I first started learning jQuery. One of the first things I did was order the jQuery In Action book. If you have read that book you should remember one of the first examples given, zebra striping a table. To me this example sold me on the idea of jQuery even if I did not actually understand how jQuery worked at the time. With one line of code I could now alternate background colors in a table.
In case you have not seen this example let's examine how it works. I am going to start in the legacy PJ (pre-jQuery) way of doing things. Back in the PJ era web sites would generate all the markup on the server and send the results to the browser. Zebra striping a table meant you would create some logic like the following (I am going to use Razor here because honestly I have forgotten how to do Web Forms):
When doing zebra striping in this classic way you need to manage adding classes to each row to control the alternating style. While there is nothing wrong with this technique, especially back in those days, it places the client-side concerns on the server. This is a very fragile way of doing things, especially in light of the way modern browsers work.
Now let's look at how zebra striping works when using jQuery. I am going to reuse the markup for both the jQuery and my CSS only example. Since I am a big college sports fan I thought I would list the most up to date ACC members, because let's face it conference memberships change almost daily. This should give me 14 rows that can have alternating background colors.
I created a jsFiddle so you can play with the example code yourself. Now instead of managing the alternating styling on the server you can apply a CSS rule to the matching table rows. Because jQuery introduced advanced selectors you can obtain a list of odd numbered rows (7 in this example) and dynamically set the background color to a light gray.
This is fantastic! Now I no longer need to worry about this on the server and can hand it over the someone that focuses more on the client-side of things. It is also extremely helpful in the context of an AJAX application because my table content has a much higher likely hood of changing without a full page refresh. When I happens I can simply reapply the styling to the new set of table rows.
Last week I posted an article about why it is time to move past jQuery reliance. One point I was trying to make was how jQuery had done a great job of pushing the browsers to offer native functionality that jQuery provides. One of those native features is advanced selectors.
So what about old browsers that do not support the cool new CSS selectors? Well there is always using polyfils. But more and more my desire is to just let them have the bland, degraded experience. Its expensive to write all the extra code to make this have the exact same experience as someone with a modern browser. The overall effect is just not going to be as nice, etc. And I think I will wrap this up before I start a whole new topic!