# Tuesday, 19 June 2018

Years ago, I created a list of my public speaking. In order to make it more readable, I added a bit of jQuery to style alternating rows with a light gray color. I used jQuery because, at that time, CSS did not support the ability to apply a style to every other row in a table.

I liked the results, but the code always struck me as awkward.

image

Eventually, CSS3 provided this ability, but not every browser immediately supported this style. So I waited. And then, I forgot about it. It was slow, but it worked.

It has been a few years and I had a bit of time, so today I removed the jQuery reference and JavaScript from this page and achieved the same results using the CSS

Here is the table opening tag. I applied a style to it only to make it easy to find, in case there are other tables on the same page.

<table class="tiger-stripe">
  

Each row has no background-color styling, because I applied that later. Here is a sample row.

 <tr style="height:15.0pt">
  <td>
   Jun 11, 2018
  </td>
  <td>
   Building and Training your own Custom Image Recognition AI
  </td>
  <td>
   Norwegian Developers Conference
  </td>
  <td>
   Oslo, Norway
  </td>
 </tr>
  

Originally, I had all this within the page's <head>:

 <style type="text/css">
  table {width:90%; border:1px solid gray;}
  .oddrow {background-color:#E5E5E5;}
 </style>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
 </script>

 <script type="text/javascript">
  $(function(){
   $("table.tiger-stripe tr:even").addClass("oddrow");
 });
 </script>
  

I was able to accomplish the same results using the "even" argument of the "nth-child" selector. I replaced the code within the <head> above with the following:

<style type="text/css">
table {width:90%; border:1px solid gray;}
table#presentationlist tr:nth-child(even) {background-color:#E5E5E5;}
</style>
  

I decided to replace the table’s class (“tiger-stripe”) with an id (“presentationlist”), since the class only exists to identify this table. Strictly speaking, this was not necessary, but it felt cleaner this way. Here is the new table tag.

<table id="presentationList">
  

Each row has no background-color styling, because I applied that later. Here is a sample row.

By eliminating the custom JavaScript and the jQuery reference, the code is much simpler and the page loads faster. I did not need to modify any HTML. CSS selectors take care of all the styling.

This is an example of using declarative programming, instead of imperative programming to accomplish a task. In other words, the new system tells the browser the results I want without explicitly specifying how I want it done.

You can see the results here

HTML5 | Web