Jump to content

TR/TD Intersection Highlight

jefe42

By jefe42
in CSS Help

Recommended Posts

ToonMariner Advanced Member

ToonMariner

Posted
Posted

hmmm

 

intersting never had to tackle this one...

 

have a look at styling colgroups (don't know if that will work) otherwise you'll have to give each cell a class of col1, col2 etc. and use some js like so

 


<table border="1">
<tr>
<td class="col1" onmouseover="highlight(this);" onmouseout"defaultbg(this);">1</td>
<td class="col2" onmouseover="highlight(this);" onmouseout"defaultbg(this);">2</td>
<td class="co3" onmouseover="highlight(this);" onmouseout"defaultbg(this);">3</td>
<td class="col4" onmouseover="highlight(this);" onmouseout"defaultbg(this);">4</td>
</tr>
<tr>
<td class="col1" onmouseover="highlight(this);" onmouseout"defaultbg(this);">1</td>
<td class="col2" onmouseover="highlight(this);" onmouseout"defaultbg(this);">2</td>
<td class="co3" onmouseover="highlight(this);" onmouseout"defaultbg(this);">3</td>
<td class="col4" onmouseover="highlight(this);" onmouseout"defaultbg(this);">4</td>
</tr>
</table>

 

and this js

 


function highlight(el)
{
var tds	=	document.getElementsByTagName('td');
for(var i=0;i<tds.length;i++)
{
  if	(tds[i].className == el.classname)
  {
   tds[i].style.background 		= '#666';
  }
}
return;
}

function defaultbg(el)
{
var tds	=	document.getElementsByTagName('td');
for(var i=0;i<tds.length;i++)
{
  if	(tds[i].className == el.classname)
  {
   tds[i].style.background 		= '#fff';
  }
}
return;
}

 

try that modify it so that you background colors are correct - you will need to add another if statment to dectect if the row is even or odd and apply the correct bg to that...

jefe42 Newbie

jefe42

Posted
  • Author
Posted

hmmm

 

intersting never had to tackle this one...

 

have a look at styling colgroups (don't know if that will work) otherwise you'll have to give each cell a class of col1, col2 etc. and use some js like so

 


<table border="1">
<tr>
<td class="col1" onmouseover="highlight(this);" onmouseout"defaultbg(this);">1</td>
<td class="col2" onmouseover="highlight(this);" onmouseout"defaultbg(this);">2</td>
<td class="co3" onmouseover="highlight(this);" onmouseout"defaultbg(this);">3</td>
<td class="col4" onmouseover="highlight(this);" onmouseout"defaultbg(this);">4</td>
</tr>
<tr>
<td class="col1" onmouseover="highlight(this);" onmouseout"defaultbg(this);">1</td>
<td class="col2" onmouseover="highlight(this);" onmouseout"defaultbg(this);">2</td>
<td class="co3" onmouseover="highlight(this);" onmouseout"defaultbg(this);">3</td>
<td class="col4" onmouseover="highlight(this);" onmouseout"defaultbg(this);">4</td>
</tr>
</table>

 

and this js

 


function highlight(el)
{
var tds	=	document.getElementsByTagName('td');
for(var i=0;i<tds.length;i++)
{
  if	(tds[i].className == el.classname)
  {
   tds[i].style.background 		= '#666';
  }
}
return;
}

function defaultbg(el)
{
var tds	=	document.getElementsByTagName('td');
for(var i=0;i<tds.length;i++)
{
  if	(tds[i].className == el.classname)
  {
   tds[i].style.background 		= '#fff';
  }
}
return;
}

 

try that modify it so that you background colors are correct - you will need to add another if statment to dectect if the row is even or odd and apply the correct bg to that...

 

Thanks for the response! I'll play with this code today and see what I can't come up with. I'm with you though, I've never seen this one done (except in the screenshot I took).

jefe42 Newbie

jefe42

Posted
  • Author
Posted

You suggestion colgroups (Which I had never heard of) led me to more google searches. I thus found the following solution

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.cur_row {
color: #000;
background: #FFE3B3;
}

.cur_col {
color: #000;
background: #FFF9B5;
}

.cur_cell {
color: #000;
background: #FDC743;
}
</style>
<script type="application/javascript">
window.onload=function()
{
    init();
}

function init()
{
    var table=document.getElementById('highlight');

    function highlight(row, col, state)
    {
        for(var i=0; i<table.rows.length; i++)
        {
            if(state=='off')
            {
                for(var j=0; j<table.rows[i].cells.length; j++)
                {
                    table.rows[i].cells[j].className='';
                }
            }

            if(state=='on')
            {
                table.rows[i].cells[col].className='cur_col';
            }
        }

        for(var i=0; i<table.rows[row].cells.length; i++)
        {
            if(state=='on')
            {
                table.rows[row].cells[i].className='cur_row';
                table.rows[row].cells[col].className='cur_cell';
            }
        }
    }
    // end function highlight

    // detect cursor position
    for(var i=0; i<table.rows.length; i++)
    {
        table.rows[i].row_index=i;
        for(var j=0; j<table.rows[i].cells.length; j++)
        {
            table.rows[i].cells[j].column_index=j;
            table.rows[i].cells[j].onmouseover=function()
            {
                highlight(this.parentNode.row_index, this.column_index, 'on');
            }
            table.rows[i].cells[j].onmouseout=function()
            {
                highlight(this.parentNode.row_index, this.column_index, 'off');
            }
        }
    }
}
</script>
</head>

<body>
<table border="1" cellspacing="0" cellpadding="4" id="highlight">
<tr>
       <td>Row 1, Column 1</td>
       <td>Row 1, Column 2</td>
       <td>Row 1, Column 3</td>
</tr>
<tr>
       <td>Row 2, Column 1</td>
       <td>Row 2, Column 2</td>
       <td>Row 2, Column 3</td>
</tr>
<tr>
       <td>Row 3, Column 1</td>
       <td>Row 3, Column 2</td>
       <td>Row 3, Column 3</td>
</tr>
</table>
</body>
</html>

Taken from http://forums.htmlhelp.com/lofiversion/index.php/t2055.html (just dropped into a nice document so people could copy/paste)

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.