Creating JavaScript-Based Table Rulers

True to form, it’s very simple to build a table ruler that only uses unobtrusive JavaScript to highlight the rows of a targeted HTML table. This is exactly what I’m going to demonstrate in the next few lines.

In this specific case, the table ruler will create via JavaScript a rollover effect on the rows of the table in question, once the whole web document has been loaded by the browser. So first, I’m going to define the CSS styles of the web page, which look like this:

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;

}

Asides from the group of CSS styles that I coded above for polishing the visual appearance of a sample HTML table, there’s an additional class, called “ruler.” This will be used by the table ruler to dynamically change the background color of each row as it is viewed by a user.

As I said before, this process will be performed through a simple JavaScript snippet, which has been listed below:

<script language="javascript">

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

As you may have noticed, the above JavaScript code looks practically identical to the example that you learned in the previous section. However, in this case the table ruler doesn’t rely completely on the “hover” CSS pseudo-class to work. It dynamically highlights the rows of the targeted HTML table by way of a simple JavaScript function. That’s quite easy to grasp, right?

So far, so good. At this stage, you hopefully learned how to build a table ruler mechanism that utilizes only JavaScript as its workhorse. This could be more efficient than using the aforementioned “hover” CSS pseudo-class because the latter is not thoroughly supported in Internet Explorer 6 and below.

Nonetheless, to complete the development of this small web application, it’s necessary to assign the CSS styles and JavaScript code shown previously to a sample HTML table. Therefore, in the upcoming section, I’ll be creating a brand new (X)HTML file that will put all of these layers to work in conjunction.

To see how this last sample file will be built, please jump ahead and read the following lines.