Highlight Table Columns [Archive] - Dynamic Drive Forums

mburt

07-24-2006, 04:11 AM

Ok. So I have a table, with four headings, and than another row.
<table width="400" border="0">
<caption>
Users
</caption>
<tr>
<td id="points" class="head">Player</td>
<td id="status" class="head">Status</td>
<td id="points" class="head">Points</td>
<td id="coordd" class="head">Coord</td>
</tr>
<tr>
<td>Straos</td>
<td>Scout</td>
<td>0</td>
<td>2:117:5</td>
</tr>
</table>

I want to be able to onmouseOver the headings, and for the column to light up. Any help appreciated.

jscheuer1

07-24-2006, 05:38 AM

Try this demo out, it may not be exactly what you are looking for but, it probably could be adapted to suit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Table Column Highlighting - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#theT {
width:80%;
border-top:3px groove silver;
border-right:3px groove silver;
}
#theT td {
border-left:3px groove silver;
border-bottom:3px groove silver;
}
</style>
<script type="text/javascript">
/* Highlight Table Columns © John Davenport Scheuer
* As first seen in http://www.dynamicdrive.com/forums/
* This notice must remain for legal use */
function hCol(n){
var tTab=document.getElementById('theT')
for (var i_tem = 0; i_tem < tTab.rows.length; i_tem++)
for (var j_tem = 0; j_tem < tTab.rows[i_tem].cells.length; j_tem++)
if(j_tem==n)
tTab.rows[i_tem].cells[j_tem].style.backgroundColor='yellow'
}
function lCol(n){
var tTab=document.getElementById('theT')
for (var i_tem = 0; i_tem < tTab.rows.length; i_tem++)
for (var j_tem = 0; j_tem < tTab.rows[i_tem].cells.length; j_tem++)
if(j_tem==n)
tTab.rows[i_tem].cells[j_tem].style.backgroundColor=''
}
function eCol(){
var tTab=document.getElementById('theT')
for (var i_tem = 0; i_tem < tTab.rows.length; i_tem++)
for (var j_tem = 0; j_tem < tTab.rows[i_tem].cells.length; j_tem++){
tTab.rows[i_tem].cells[j_tem].onmouseover=new Function("hCol("+j_tem+");");
tTab.rows[i_tem].cells[j_tem].onmouseout=new Function("lCol("+j_tem+");");
}
}
onload=eCol;
</script>
</head>
<body>
<table id="theT" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
</tbody>
</table>
 
</body>
</html>

mburt

07-24-2006, 02:37 PM

Thanks, It worked out great.