How to Style a Striped Table Using JQuery
Posted in Tutorials
In the tutorial on styling a striped table using CSS, we had to add the class=”even” attribute on every other tr row to create a striped table that looks like this with yellow and green alternating rows…
Finished Striped Table
Besides hand-coding this “even” attribute, this attribute can be generated using a back-end script such as PHP. Alternatively, we can use JQuery to dynamically add this attribute to our markup on the front-end. In this tutorial, we will show you how to use JQuery for this.
1. Let’s start with this HTML code of a striped table. It still has the class=”even” attributes hard-coded in it from the last tutorial …
HTML of striped table
2. That HTML has the following associated CSS code …
CSS file of striped table
3. If you run the code on your browser, you can confirm that it produces this stripped table…
CSS Striped Table
See the live code example here.
4. Now we remove the class=”even” attribute from the tr elements …
table with the "even" class attribute
Without that attribute, all our rows are yellow…
table without stripes
4. We will be adding our JQuery code in a script file called script.js. Therefore, we must include this script in the head of our HTML page like so …
include our script and JQuery library
5. In order to use JQuery, we also need to include the core JQuery library as shown above. There are many ways to include this library, including downloading the library from JQuery site and uploading to your server. However, the JQuery library is also hosted on Google Content Delivery Network (CDN) for you to use. So we will be using that. That is why you see the link to …
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
The “src” source path will differ depending on the JQuery version that you are using. The latest JQuery version as of this writing is 1.4.4 and that is the path for it. Whenever you need this path, you can get the latest path by visiting Google Library API Developer Guide and clicking on JQuery.
It will show you two paths: one to the minimized version of the JQuery library and another to the un-minimized version. Typically, you want to link to the minimized version because the file is smaller and will download faster. That is why you see the filename “jquery.min.js” with “min” in it.
6. Okay, now we are ready to write our JQuery code in the script.js file …
JQuery skeleton code
This is the basic JQuery skeleton code. We will put the code in between the curly braces. And that code will execute when the document page has loaded.
The ready function basically detects when the page has loaded. And if so, execute the function.
The book JQuery Novice to Ninja explains more in the section “Making Sure the Page is Ready” in chapter 2.
7. For the meat of this function, we write …
JQuery code to stripe the table
The JQuery selector …
$('table.striped tbody tr')
selects tr’s that are in the tbody of tables of class “striped”. Similar to CSS selectors.
Since the body of our table has four rows, this would select four tr’s. For each tr (that is what the “.each” says), perform the code that is in that function shown above.
“row++” increments the row counter which we had intialized to zero with …
var row = 0;
The if condition …
if ( row % 2 == 0 ) {
says that if the row is evenly divisible by 2 (meaning the row is even), then perform the following statement …
$(this).addClass('even');
The “this” refers to the tr element that is currently selected. So we add the “even” classname to that tr with the “addClass” function.
8. Run the code in your browser and you should get …
Finished Striped Table
Related Posts
Tags
Share This
