Changing CSS style in use for <TD> using Javascript - How?

D

Dave Smithz

Hi there,

I want to change the CSS style sheet applied to a table cell when the mouse
moves over it. But I am not sure how to do it.

I have written a function like this:

function highlight_cell (obj) {
obj.styleSheet="navHighlightCell";
};

Which has associated style sheet like this:

..navHighlightCell {
background-color: #FFFFFF;
}

But it does not work. I know I can just use the following code in the
function
obj.style.backgroundColor='#FFFFFF';
I have got this to work, but I do not want to hard code colours or anything
like that. I want to keep them in stylesheets.

Obviously the solution should be one that is cross browser compatible.

Can anyone help?

Kind regards

Dave
 
B

BootNic

Dave Smithz said:
Hi there,

I want to change the CSS style sheet applied to a table cell when
the mouse moves over it. But I am not sure how to do it.
[snip]

But it does not work. I know I can just use the following code in
the function
obj.style.backgroundColor='#FFFFFF';
I have got this to work, but I do not want to hard code colours or
anything like that. I want to keep them in stylesheets.

Obviously the solution should be one that is cross browser
compatible.

Can anyone help?
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function hbob(){
var v=document.getElementById('bob').getElementsByTagName('tbody')[0].getElementsByTagName('td');
var x,i,j;
for (i=0, j=v.length; i<j; i++) {
x=v;
x.onmouseover=function(){this.className='highlight';};
x.onmouseout=function(){this.className='';};
}
}
if(document.getElementById &&
document.getElementsByTagName &&
(window.attachEvent || window.addEventListener))
{
frank=(window.attachEvent)?window.attachEvent('onload', hbob):
window.addEventListener("load", hbob, false);
}
</script>
<style type="text/css">
#bob{
margin: auto;
}
#bob tbody td{
background-color: #7FFFD4;
color: #A9A9A9;
}
#bob tbody td.highlight{
background-color: #FFFFE0;
color: #FF0000;
}
</style>
<title></title>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
</head>
<body>
<table id="bob" summary="" border="1">
<thead>
<tr><td colspan="2">My Table Head</td></tr>
</thead>
<tfoot><tr><td colspan="2">My Table Foot</td></tr></tfoot>
<tbody>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
<tr><td>Row 4 Cell 1</td><td>Row 4 Cell 2</td></tr>
<tr><td>Row 5 Cell 1</td><td>Row 5 Cell 2</td></tr>
</tbody>
</table>
</body>
</html>

--
BootNic Friday, February 24, 2006 9:24 AM

All things come to him who waits - provided he knows what he is
waiting for.
*Woodrow T. Wilson*
 
T

Toby Inkster

Dave said:
function highlight_cell (obj) {
obj.styleSheet="navHighlightCell";
};
Click to expand...

obj.styleSheet doesn't do what you think it does.

You probably want obj.className.
 
G

google

Dave said:
I want to change the CSS style sheet applied to a table cell when the mouse
moves over it. But I am not sure how to do it.
Click to expand...

This is some code that should work for changing the background color of
a cell when hovering over it:

<head>
<script type="text/javascript">
function hl(source){
if (source.className == 'style-1') {
source.className = 'style-2';
} else if (source.className == 'style-2') {
source.className = 'style-1';
}
}
</script>
<style>
.style-1 {
background-color:white;
}
.style-2 {
background-color:blue;
}
</style>
</head>
<body>
<table>
<tr>
<td onMouseOver="hl(this);" onMouseOut="hl(this);">This is the cell
that will change color</td>
</tr>
</table>
</body>

Chris S.
Implied By Design LLC.
http://www.impliedbydesign.com
Free Web Design Tools
http://www.impliedbydesign.com/free-software-scripts.html
 
D

dorayme

You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
are there any particular advantages to you or others?

(There is a particular but minor disadvantage using
MT-NewsWatcher to read such, there being no prefs to hold the
text at a size the user finds comfortable. Quite minor as one can
easily decode as Western ISO or ASCII on a post by post basis
from a context menu and it then follows my font prefs. I was
wondering because very few NG articles are so formatted?)
 
L

Luigi Donatello Asero

dorayme said:
You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
are there any particular advantages to you or others?
Click to expand...

By using UTF-8 I can display
both the characters used by
Westeuropeans languages and the ones used by other languages such as
Chinese and Russian (it uses cyrillic)
My signature often displays such characters.
(the signature below shows only Chinese and Italian)
 
L

Leonard Blaisdell

dorayme said:
You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
are there any particular advantages to you or others?

(There is a particular but minor disadvantage using
MT-NewsWatcher to read such, there being no prefs to hold the
text at a size the user finds comfortable. Quite minor as one can
easily decode as Western ISO or ASCII on a post by post basis
from a context menu and it then follows my font prefs. I was
wondering because very few NG articles are so formatted?)
Click to expand...

You hit my only gripe with MT-NW. I absolutely hate what you just
described. Command-r shows them properly with <greater than> signs for
the original poster which is confusing. Command-y doesn't necessarily
close the window without something you must respond to if MT-NW thinks
you messed with the original message. And Command-r is a hack that is
not meant to solve the situation. You're supposed to reply with
Command-r. Some of the more interesting people I read use UTF-8.
This is a most annoying disadvantage of an otherwise fine reader on
MacOS.

leo
 
T

Toby Inkster

dorayme said:
You and Els and Luigi use Unicode UTF-8 in your posts to this ng,
are there any particular advantages to you or others?
Click to expand...

None in particular. I can change it on a post-by-post basis (like this
one), but I think UTF-8 is a pretty good character set to default to, as
it contains the entire Unicode repetoire.
 
D

dorayme

Luigi Donatello Asero said:
By using UTF-8 I can display
both the characters used by
Westeuropeans languages and the ones used by other languages such as
Chinese and Russian (it uses cyrillic)
My signature often displays such characters.
(the signature below shows only Chinese and Italian)
Click to expand...

Yes, thank you Luigi... (it was parochial of me, I tend not to
look at these displays in NG articles...)
 
D

dorayme

Leonard Blaisdell said:
Some of the more interesting people I read use UTF-8.
This is a most annoying disadvantage of an otherwise fine reader on
MacOS.
Click to expand...

I understand that this will not easily be fixed unless the author
of MT gets funded to develop it further...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
How to make Intellisense Quick Info for JavaScript and CSS files to appear in Visual Studio 2017? 0
How to paint an element in screen using javascript? 1
Add recipes using JavaScript in table 20
how to use <li> tag for each <td> and get ordered serial number for every <li>. 0
Working on mobile css menu with plenty of frustration! 2
<Button ...> display is fine, except for two things 1

Members online

Total: 45 (members: 1, guests: 44)
Robots: 379

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,822
Latest member
israfaceZa

Latest Threads

Top