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:

Before I start teaching you how to create a table ruler that will be capable of targeting multiple HTML tables, it’d be pretty convenient to spend a few moments recalling the hands-on example developed in the preceding tutorial, where I explained how to create the same web application, but targeting only one table.

That being said, here’s the full source code of the aforementioned example:

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

<head>

<title>Example on building a table ruler</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 implementing a table ruler with one table

function displayTableRuler(){

// get ruled table

var table=document.getElementById('ruledtable');

if(!table){return};

// get all <tr> elements of ruled table

var trs=table.getElementsByTagName('tr');

// loop over <tr> elements of ruled table

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

// display table ruler

trs[i].onmouseover=function(){

this.className='ruler';

}

// remove table ruler

trs[i].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

displayTableRuler();

}

</script>

</head>

<body>

<h1>Example on building a table ruler</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>

Now that you’ve taken a look at the above code sample, hopefully you’ll be pretty familiar with building a table ruler that highlights the rows of a single HTML table, right? As you can see, the previous example utilizes a small JavaScript application to implement the rollover effect on a targeted HTML table, a process that should be quite easy for you to grasp.

At this stage, I reintroduced a concrete example that demonstrates how to develop a simple table ruler that works with a single table. So, what's next? Well, as I explained at the beginning, it’s perfectly possible (and desirable, actually) to extend the functionality of this web application to provide it with the capacity for using multiple tables.

Therefore, assuming that you’re interested in learning how to achieve this with minor hassles, in the following section I’ll be modifying the small JavaScript application that you saw before so it can apply the table ruler effect to several HTML tables.

Click on the link that appears below and keep reading.

Next: Extending the functionality of the table ruler >>