JAVASCRIPT

Creating JavaScript-Based Table Rulers

Welcome to the second chapter of a series that shows you how to create table rulers with CSS and JavaScript. This series provides you with a bunch of useful pointers that hopefully will get you started incorporating appealing table rulers into your own web sites with only minor hassles.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

September 03, 2009

TABLE OF CONTENTS:

It’s possible that you haven’t had the chance to read the last article, where I illustrated how to build a basic table ruler by using a few simple CSS styles along with a pinch of JavaScript. Therefore, below I reintroduced the complete source code of this small web application, so you can grasp very quickly how it works. Here it is:

<!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;

}

#ruledtable tr:hover,#ruledtable .ruler{

background: #fc0;

}

</style>

// example on implementing 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>

As shown above, the previous table ruler has been built around the functionality of the “hover” CSS pseudo-class. This is handled pretty well by most modern browsers, except for Internet Explorer 6 and below that only support this feature with web page hyperlinks. That annoying limitation is exactly why I added a little piece of JavaScript, which permits you to create a rollover effect on each row of the selected HTML table.

At this moment, if you try out the prior example on your own machine, you’ll see that it’ll work as expected with most popular browsers, including Internet Explorer. However, it’s perfectly feasible to create the same table row highlighting mechanism by using only unobtrusive JavaScript code. This will reduce the number of CSS styles that must be written.

Thus, in the section to come, I’ll be explaining how to build a table ruler that relies only on JavaScript to do its business.

Want to see how it will be constructed? Then click on the link that appears below and keep reading.

Next: Building a JavaScript-based table ruler >>