Home arrow JavaScript arrow Page 2 - Creating Table Rulers with the jQuery JavaScript Library
JAVASCRIPT

Creating Table Rulers with the jQuery JavaScript Library


Welcome to the final installment of a series on creating table rulers with CSS and JavaScript. Comprised of four approachable tutorials, this series demonstrates how to build a table ruler by means of several approaches, ranging from utilizing CSS and JavaScript separately, to using a balanced combination of them.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
September 17, 2009
TABLE OF CONTENTS:
  1. · Creating Table Rulers with the jQuery JavaScript Library
  2. · Review: building a table ruler using plain JavaScript
  3. · Adding and removing CSS classes dynamically with jQuery
  4. · Full source code for the jQuery-based table ruler

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Creating Table Rulers with the jQuery JavaScript Library - Review: building a table ruler using plain JavaScript
(Page 2 of 4 )

Before I begin explaining how the jQuery JavaScript library can be used for building a simple table ruler, I'm going to review the hands-on example developed in the preceding tutorial. It demonstrated how this same web application can be created with plain JavaScript.

That being clarified, here’s how the aforementioned example looked originally:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>A table ruler that works with multiple tables</title>

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 20pt Arial, Helvetica, sans-serif;

color:#000;

}

table{

width: 60%;

border: 1px solid #000;

border-collapse: collapse;

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

}

th{

background: #9cf;

}

th,td{

border: 1px solid #000;

border-collapse: collapse;

padding: 2px;

}

.ruler{

background: #fc0;

}

</style>

<script language="javascript">

// example on building a table ruler with multiple tables

function displayTableRulers(){

// get all the tables

var tables=document.getElementsByTagName('table');

if(!tables){return};

for(var i=0;i<tables.length;i++){

// check to see if there are tables with 'ruledtable' class name

if(tables[i].className=='ruledtable'){

// get all <tr> elements of ruled table

var trs=tables[i].getElementsByTagName('tr');

// loop over <tr> elements of ruled table

for(var j=0;j<trs.length;j++){

// display table ruler

trs[j].onmouseover=function(){

this.className='ruler';

}

// remove table ruler

trs[j].onmouseout=function(){

this.className='';

}

}

}

}

}

// display table ruler when the web page has been loaded

window.onload=function(){

if(document.getElementById&&document.getElementsByTagName&&document.
createElement){

// display table ruler

displayTableRulers();

}

}

</script>

</head>

<body>

<h1>First Table</h1>

<table class="ruledtable">

<thead>

<tr>

<th scope="col">First Name</th>

<th scope="col">Last Name</th>

<th scope="col">Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Alejandro</td>

<td>Gervasio</td>

<td>alejandro@domain.com</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>john@domain.com</td>

</tr>

<tr>

<td>Susan</td>

<td>Norton</td>

<td>susan@domain.com</td>

</tr>

<tr>

<td>Marian</td>

<td>Wilson</td>

<td>marian@domain.com</td>

</tr>

<tr>

<td>Mary</td>

<td>Smith</td>

<td>mary@domain.com</td>

</tr>

<tr>

<td>Amanda</td>

<td>Bears</td>

<td>amanda@domain.com</td>

</tr>

<tr>

<td>Jodie</td>

<td>Foster</td>

<td>jodie@domain.com</td>

</tr>

<tr>

<td>Laura</td>

<td>Linney</td>

<td>laura@domain.com</td>

</tr>

<tr>

<td>Alice</td>

<td>Dern</td>

<td>alice@domain.com</td>

</tr>

<tr>

<td>Jennifer</td>

<td>Aniston</td>

<td>jennifer@domain.com</td>

</tr>

</tbody>

</table>

<h1>Second Table</h1>

<table class="ruledtable">

<thead>

<tr>

<th scope="col">First Name</th>

<th scope="col">Last Name</th>

<th scope="col">Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Alejandro</td>

<td>Gervasio</td>

<td>alejandro@domain.com</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>john@domain.com</td>

</tr>

<tr>

<td>Susan</td>

<td>Norton</td>

<td>susan@domain.com</td>

</tr>

<tr>

<td>Marian</td>

<td>Wilson</td>

<td>marian@domain.com</td>

</tr>

<tr>

<td>Mary</td>

<td>Smith</td>

<td>mary@domain.com</td>

</tr>

<tr>

<td>Amanda</td>

<td>Bears</td>

<td>amanda@domain.com</td>

</tr>

<tr>

<td>Jodie</td>

<td>Foster</td>

<td>jodie@domain.com</td>

</tr>

<tr>

<td>Laura</td>

<td>Linney</td>

<td>laura@domain.com</td>

</tr>

<tr>

<td>Alice</td>

<td>Dern</td>

<td>alice@domain.com</td>

</tr>

<tr>

<td>Jennifer</td>

<td>Aniston</td>

<td>jennifer@domain.com</td>

</tr>

</tbody>

</table>

</body>

</html>

As you can see, the above code sample shows how to develop a table ruler which can be utilized with multiple HTML tables. For this situation, I coded only a couple of tables to exemplify the use of the table ruler. But as you may guess, it’s perfectly possible to apply this highlighting effect to any number of them.

So far, so good. At this point, you’re hopefully familiar with building a table ruler using plain JavaScript. Next, I’m going to teach you how to recreate the same JavaScript application, but this time with the assistance of the jQuery package.

Want to learn how this will be achieved? Then read the following section.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
Find More JavaScript Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials