473,324 Members | 2,400 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

How to hover over one table cell and have three cells change color?

Can anyone help me out with some code to change three table cells
(<td>) when one is hovered over?

I have a calendar grid where each day is made up of three table cells and
I want all three to change color when any of the three are hovered over.

I would prefer to do this with pure CSS if possible, but if Javascript is
the only way...so be it.

--
[ Sugapablo ]
[ http://www.sugapablo.net <--personal | http://www.sugapablo.com <--music ]
[ http://www.2ra.org <--political | http://www.subuse.net <--discuss ]

Jul 21 '05 #1
2 11217

Roughly I'd say, give an onmouseover to the parent TR, but, you probably
have a TR with many days in it, not just 1(3 td). I could be mistaken as
I don't know your scenario, but keeping 1 cell alone will do, and barely I
see the need for 3 just for 1day data, so, it seems to me you just need to
make it 1 container, instead of 3 siblings out of many, then again, we
don't konw what you have, maybe posting at www.pastebin.com your code will
give us better outlook to suggest better.
Danny

On Thu, 30 Jun 2005 09:48:04 -0700, Sugapablo <ru**@REMOVEsugapablo.com>
wrote:
Can anyone help me out with some code to change three table cells
(<td>) when one is hovered over?

I have a calendar grid where each day is made up of three table cells and
I want all three to change color when any of the three are hovered over.

I would prefer to do this with pure CSS if possible, but if Javascript is
the only way...so be it.


--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 21 '05 #2
Sugapablo wrote:
Can anyone help me out with some code to change three table cells
(<td>) when one is hovered over?

I have a calendar grid where each day is made up of three table cells and
I want all three to change color when any of the three are hovered over.

I would prefer to do this with pure CSS if possible, but if Javascript is
the only way...so be it.


Below is a script that changes the style of cells in groups of 3.

There are likely better ways of doing it, say if you put your 3 'cells'
inside a single table cell and use DIV elements instead of TDs for the
three cells. Then you only need a single mouseover/out on the base
cell.

If there was wider support for 'hover' on elements other than A you
could use that with pure CSS. But since IE doesn't support hover on
cells, you're sunk (unless none of your visitors us IE :-) ).

e.g. have a look at the second table in a browser other than IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>hi/lo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#calendar {
border-collapse: collapse;
}
#calendar td {
width: 3em; height: 2em;
}
..hiLite { color: black; background-color: #E6E0C1;}
..loLite { color: black; background-color: #FFCC66;}

#calendar2 {
border-collapse: collapse;
}
#calendar2 td {
width: 3em; height: 2em; color: black; background-color: #FFCC66;
}
#calendar2 td:hover {
color: black; background-color: #E6E0C1;
}
</style>
</head>
<script type="text/javascript">
function cellHiLite(cell, lite) {
var row = cell.parentNode;
var idx = Math.floor(cell.cellIndex/3)*3;
for ( var i=0; i<3; i++ ) {
row.cells[idx+i].className = ('hi' == lite )? 'hiLite' : 'loLite';
}
}
// Add mouseover/out & sets initial class to lowLite
function initTable(t) {
if ( !document.getElementById
|| !document.getElementsByTagName
|| !document.body.style ) {
return;
}
var cells = document.getElementById(t).getElementsByTagName('t d');
var c, i = cells.length;
while ( i-- ) {
c = cells[i];
c.className = 'loLite';
c.onmouseover = function() {cellHiLite(this,'hi');}
c.onmouseout = function() {cellHiLite(this,'low');}
}
}
window.onload = function() { initTable('calendar'); }

</script>
<p>This table uses scripted mouseover/out</p>
<table id="calendar">
<tr><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></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<hr>
<p>This table uses CSS and hover (not supported by IE)</p>
<table id="calendar2">
<tr><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></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

</body></html>

--
Rob
Jul 21 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Harlan Messinger | last post by:
I've had this in the back of my head for a while. Take a look at Example 1 on http://gavelcade.com/table.html There are three levels of column headings. All table accessibility discussions...
3
by: N. Demos | last post by:
I have a single row table with fixed dimensioned cells nested inside a fixed dimensioned div, which has overflow: hidden. The div's dimensions are such that It should only display the first two...
1
by: Jon W | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3....
2
by: Mike | last post by:
My page populates a table with a list of names and other information from a JavaScript object. I receive changes (adds, change & delete) to that list, convert it into a JavaScript object. I do...
2
by: Sugapablo | last post by:
Can anyone help me out with some code to change three table cells (<td>) when one is hovered over? I have a calendar grid where each day is made up of three table cells and I want all three to...
0
by: Jon W | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3....
13
by: Gary | last post by:
I have a table with a form consisting of several checkboxes and I'm wondering if its possible to change the table row background color on mouseover or hover and make it stay that color when the...
1
by: Thanks | last post by:
I have a routine that is called on Page_Init. It retrieves folder records from a database which I display as Link Buttons in a table cell. I set the table cell's bgcolor to a default color (say...
1
by: bgernon | last post by:
I have a table that consists of two rows with three cells each row. The cells contain textboxes. I am able to successfully add a new row with textboxes when a button is clicked. The problem is...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.