After searching google for any code to hilite columns, nothing really did the job. The 'colgroups method' as given above wasn't really sufficient.
Maybe the following works for you, it worked for me, and i tested it in IE and firefox. Id like to hear your comments:
Put the following in the header of your file (or in a js file).
function setColColor(e,table,Color) {
var browserName=navigator.appName;
var q;
if(browserName=="Netscape")
var obj = e.target;
else if(browserName=="Microsoft Internet Explorer")
var obj = e.srcElement;
if(obj.nodeName=='TH'){
// Get the index of TBODY (this is may differ when there are headers etc)
for(var i=0;i<4;i++){
if(table.childNodes[i].nodeName=="TBODY"){
q=i;
break;
}
}
//alert(obj.cellIndex);
// Walk through the rows
for (var i=0; i<table.childNodes[q].childNodes.length; i++)
{
// Walk through the cells, starting (and if html is correctly coded also ending)
// at obj.cellIndex: the col to be hilited
for (var n=obj.cellIndex; n<table.childNodes[q].childNodes[i].childNodes.length; n++)
{
if(table.childNodes[q].childNodes[i].childNodes[n].cellIndex==obj.cellIndex){
table.childNodes[q].childNodes[i].childNodes[n].style.backgroundColor=Color;
break;
}
}
}
}
}
This code is specifically for hiliting colums when the mouse is over the header.
This can simply be changed by changing
if(obj.nodeName=='TH'){
to
if(obj.nodeName=='TD'){
Now put the following in your table tags of the table wich you want column highlighting.
<table onmouseover='setColColor(event,this,"#CD5C5C")' onMouseOut="setColColor(event,this,'')">
(Or as response to a click by using onclick)
This code could be edited to only hilite specific cols. This can be done to check the value of obj.cellIndex