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.
Creating Table Rulers with the jQuery JavaScript Library - Full source code for the jQuery-based table ruler (Page 4 of 4 )
Certainly, the best way to understand the table ruler created in the previous section function is by looking at its complete source code. Therefore, below I coded a brand new (X)HTML file that includes all the layers required to get this JavaScript application working correctly. Have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// example on building a table ruler with jQuery library
$(document).ready(function(){
// get all <tr> elements in table and build the ruler
$("#ruledtable tr").hover(
function(){
$(this).addClass("ruler");
},
function(){
$(this).removeClass("ruler");
}
);
});
</script>
</head>
<body>
<h1>Example on building a table ruler with jQuery library</h1>
<table id="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>
That’s it. I've now shown you how to build a table ruler with the jQuery library. Naturally, I’m not saying that you should use it to create a web application as simple as this one, but you may want to consider it a valid option that will prevent you from spending endless hours coding JavaScript programs from scratch.
Final thoughts
It’s sad to say it, but we’ve come to the end of this series. Hopefully the overall experience has been educational, since you learned how to build a bunch of table rulers by means of different approaches.
Definitely, creating a web application like this will help you to acquire a solid grounding in using unobtrusive JavaScript, which can contribute to expanding your existing skills as web developer.
See you in the next web development tutorial!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
JavaScript 
Making Table Rulers Work with Multiple Tables
