Table Ruler, jQuery-style
My sites that have data in the form of numbers and tables, think sports stats, generally alternate background colors for each line row. Another eye-helper that many use is a light table ruler to help you keep your place and read across long rows easier.
A List Apart posted a javascript to use in 2004 to add a table ruler to any table with the class of ‘ruler’. Any row that you moused over would have its class replaced with ‘ruled’.
function tableruler()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName ('table');
for (var i=0;i<tables.length;i++)
{
if(tables[i].className=='ruler')
{
var trs=tables[i].getElementsByTagName('tr');
for(var j=0;j<trs.length;j++)
{
if(trs[j].parentNode.nodeName=='TBODY' && trs[j].parentNode.nodeName!='TFOOT')
{
trs[j].onmouseover=function(){this.className='ruled';return false}
trs[j].onmouseout=function(){this.className='';return false}
}
}
}
}
}
}
You would then call the function after the page is loaded like such:
window.onload=function(){tableruler();}
For my own uses, I did a check on the table row class and did a different type of class replacing, but the concept remained the same.
I was updating my class concept for some of my stats tables, wanting to ditch the need for different class replacing, and decided to update using jQuery. I was already loading jQuery for other scripts, so I figured I might as well simplify this script a bit, too.
$(document).ready(function() {
/* tableruler */
$("table.ruler tr").hover(
function(){
$(this).addClass("ruled");
},
function(){
$(this).removeClass("ruled");
}
);
});
Wrapped in jQuery’s delayed load, the script is slightly different than the original. Instead of replacing the table row class you’re mousing over, it adds a new class, ‘ruled’, and removes it when you mouse out [jQuery’s .hover() actually uses its .mouseenter() and .mouseleave() functions, not mouseover() and mouseout()].
It’s simple and effective, and helps data table readability.
Next entry: NFL’s Ticket Opportunity
Previous entry: Finding Purpose
Comments