Jump to content

TR/TD Intersection Highlight

jefe42

By jefe42
in CSS Help

 Share

Recommended Posts

jefe42 Newbie

jefe42

Posted
Posted

Hi:

 

I know how to highlight a row (tr) using CSS on hover, but how would I also highlight the whole column (td) at the intersection on hover.

 

Please see the attached image.

grid.jpg

 

Thanks in Advance!

 

Jeff

Link to comment
Share on other sites
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...

Link to comment
Share on other sites
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).

Link to comment
Share on other sites
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)

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.