JAVASCRIPT

Making Table Rulers Work with Multiple Tables

A table ruler is a helpful mechanism that allows the user to highlight sections of a selected HTML table every time the mouse is placed over each of its rows. Naturally, this simple rollover effect permits users to keep track of the row currently being viewed, in this way increasing the table’s overall usability. This is the third article in a four-part series on creating table rulers.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

September 10, 2009

TABLE OF CONTENTS:

If you’re anything like me, then it’s probable that you may want to see how the table ruler created in the previous section can be used with multiple tables. So, below I coded a another (X)HTML file that shows how this JavaScript program can be put to work with a couple of sample tables. Here’s how this file looks:

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

<head>

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

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>

// 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>

<thead>

<tr>

<th scope="col">First 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@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>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>alice@domain.com</td>

</tr>

<tr>

<td>Jennifer</td>

<td>Aniston</td>

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

</tr>

</tbody>

</table>

<h1>Second Table</h1>

<thead>

<tr>

<th scope="col">First 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@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>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>alice@domain.com</td>

</tr>

<tr>

<td>Jennifer</td>

<td>Aniston</td>

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

</tr>

</tbody>

</table>

</body>

</html>

As depicted above, the table ruler is now capable of highlighting the rows of multiple HTML tables. In the previous code sample, the tables in question have been targeted by assigning a “ruledtable” value to their “class” attribute, but logically IDs can be used as well.

And finally, to complement the previous explanation, here are a couple of screen shots that show the table ruler in action. Take a look at them, please:

Hopefully, the above images give you an approximate idea of the way that the table ruler can be used with a pair of sample HTML tables. Of course, there’s plenty of room to improve the functionality of this JavaScript application, so feel free to tweak all of the code samples shown in this tutorial.

Final thoughts

In this third episode of the series, I explained how to build an improved version of the table ruler, which is capable of working with several HTML tables. As you saw before, creating such a web application was actually a no-brainer process that only required using some basic DOM scripting.

In the next chapter, I’ll be demonstrating how to develop a table ruler by using yet another approach. This time, it’ll be created with the assistance of the jQuery JavaScript framework.

Now that you know the subject of the forthcoming tutorial, you don’t have any excuses to miss it!

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.