...

View Full Version : Highlighting Table *columns*



tdellaringa
06-25-2004, 10:02 PM
Hi,

I've been playing with the "crosshair" effect of highlighting a table row and column based on the cell moused over. I've found various scripts that do just that, but none of them work across the platforms I need - which is IE5.0+, NS6+. I'm thinking there should be a way to do this but I've hit a dead end. Here is my table row highlight function:



function HighlightRow()
{
var lastRowClass;
var oRows = document.getElementsByTagName("tr");
for(var i=0; i<oRows.length; i++)
{
if ((oRows[i].className == "rowColor1") || (oRows[i].className == "rowColor2"))
{
oRows[i].onmouseover = function() {
lastRowClass = this.className;
this.className = "rowHL";
}
oRows[i].onmouseout = function() {
this.className = lastRowClass;
}
}
var oCols = oRows[i].getElementsByTagName("td");
}
}


This works just fine, I call it on page load. What I now need to do is highlight the row.

I'm stumped because I cannot seem to get the table cell reference I need. If I can simply get the index of the cell in the current row I'm golden. Lets say I mouse over row 2, cell 3. If I can somehow capture the fact that I am on cell 3, I can loop through each row and highlight cell 3 no problem.

Any help is appreciated. Remember, this MUST work in IE5.0+ and NS6.0 + - so that eliminates some more recent DOM methods...

Thanks!

Tom

Terry
06-26-2004, 03:44 PM
Check it out!

http://www.xdevdesign.com/testing/crosshairs.htm

The solution works with a complex table as well. Targeting each td is surprisingly simple as long as you think of the tr and td behaviour as seperate events that don't even have to be related.

Edit: Just realized that maybe you had something else in mind ... Like a REAL crosshair :) Indeed that would require some more thought.

Terry
06-26-2004, 06:30 PM
You can find the index of a cell with the dom method: cellIndex

Ref here:
http://www.quirksmode.org/dom/w3c_html.html
Seems to be implemented in all the major browsers except Safari.

adios
06-26-2004, 11:35 PM
Safari == 'great demographic' :cool:

OK...this is slow as mulattos, but it sort-of-works. Not exactly Flash.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

body {
background: buttonface;
}
#crosser {
margin: 40px auto;
}
#crosser th {
font: bold 10px verdana, sans-serif;
}
#crosser td.index {
font: bold 10px verdana, sans-serif;
text-align: right;
border: none;
}
#crosser td.x-off {
font: normal 11px verdana, sans-serif;
color: #fff;
padding: 1px;
border: 3px #000 double;
background: #000;
}
#crosser td.x-on {
font: normal 11px verdana, sans-serif;
padding: 1px;
border: 3px #000 double;
background: #ff0;
}
tr {
cursor: pointer;
}

</style>
<script type="text/javascript">

onload = function()
{
var the_table = document.getElementById('crosser'); //get table
var c = 0, a_cell, the_cells = the_table.getElementsByTagName('td'); //get cells
var col = 1; //index counter
while (a_cell = the_cells[c++]) //loop, assign
{
if (null == a_cell.previousSibling) //new row
col = 1; //reset
else a_cell.col = col++; //or bump
if (a_cell.className == 'x-off') //data cell
{
a_cell.onmouseover = function()
{
var this_cell, c = 1;
var this_row = this.parentNode.getElementsByTagName('td'); //get row cells
while (this_cell = this_row[c++]) //loop
this_cell.className = 'x-on'; //flip
var r = 1, a_row, all_rows = the_table.getElementsByTagName('tr'); //get all rows
while (a_row = all_rows[r++]) //loop
if (row_coll = a_row.getElementsByTagName('td')) //not a header
row_coll[this.col].className = 'x-on'; //flip cell with same index
}
a_cell.onmouseout = function()
{
var this_cell, c = 1;
var this_row = this.parentNode.getElementsByTagName('td');
while (this_cell = this_row[c++])
this_cell.className = 'x-off';
var r = 1, a_row, all_rows = the_table.getElementsByTagName('tr');
while (a_row = all_rows[r++])
if (row_coll = a_row.getElementsByTagName('td'))
row_coll[this.col].className = 'x-off';
}
}
}
}

</script>
</head>
<body>
<table id="crosser" cellspacing="2">
<thead>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
<th>i</th>
<th>j</th>
<th>k</th>
<th>l</th>
</tr>
</thead>
<tbody>
<script type="text/javascript">

for (var z = 1; z < 13; ++z)

document.write(

'<tr>' ,

'<td class="index">' + z + '</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,
'<td class="x-off">foo</td>' ,

'</tr>'

);

</script>
</tbody>
</table>
</body>
</html>

Take another look later...

shlagish
06-27-2004, 12:05 AM
Just thinking out loud:
Maybe you could get the cells with tr.childNodes

var trs=document.getElementsByTagName("tr");
this way, if the cell you hovering trs[3].childNodes[1]
you can loop through the trs and set their second childNode to the class you want.
for(var i=0;i<trs.length;++i){
trs[i].childNodes[1].setAttribute("class","hovered");
}

something like that?

Terry
06-29-2004, 11:43 AM
Safari == 'great demographic' :cool:

OK...this is slow as mulattos, but it sort-of-works. Not exactly Flash.


Not too slow for me, I'm on a p4 2.8. Looks like you nailed it :thumbsup: Nice work. With your while loops it should be quicker too. Now that I see it in action I'd have to say that I wouldn't use it in the real world, it looks kinda funny in practice! I think a user would be confused to say the least.

jkd
06-29-2004, 07:32 PM
Why not take advantage of event bubbling?



function doCrosshair(evt, cls) {
var oEvent = evt || window.event;
var target = oEvent.target || oEvent.srcElement;
while (target.nodeName.toLowerCase() != "td") target = target.parentNode;
if (target) target.className=cls;
}

if (document.addEventListener) {
refToTable.addEventListener("mouseover", function(evt) { doCrosshair(evt, "hovered") }, false);
refToTable.addEventListener("mouseout", function(evt) { doCrosshair(evt, "normal") }, false);
}
else if (window.attachEvent) {
refToTable.attachEvent("onmouseover", function() { doCrosshair(null, "hovered") });
refToTable.attachEvent("onmouseout", function() { doCrosshair(null, "normal") });
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum