homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Highlighting td and tr

10+ Year Member

Msg#: 2919 posted 7:51 pm on Dec 17, 2004 (gmt 0)

Hello world i have several <tr>s and 5 <td> in each tr.
I need to highlight selected tr and td at once. Is it possible with hover effects or i should use onmouseover somethere?



WebmasterWorld Senior Member 10+ Year Member

Msg#: 2919 posted 9:24 pm on Dec 17, 2004 (gmt 0)

I'm not sure what do you mean. Do you want to highlight whole tr at once? If yes, it's possible to do with javascript:


only there are some restrictions in td elements. As I recall you can't specify background color there.

About the hover I don't know. However in CSS2 it is possible.

Merry Christmas!
Michal Cibor


10+ Year Member

Msg#: 2919 posted 9:54 pm on Dec 17, 2004 (gmt 0)

I prefer to define a specific class for each state, then use javascript to change the class name --and hence the style.

Thus in the header or external stylesheetI might define classes such as:
.plain {background-color: #eee;font-weight:normal}
.hilite {background-color: #0cf}
.hilite2 {background-color: #f00; font-weight:bold}

Then, I can give the row one style, and change it on mouseover (and back) thus:
<tr class="plain"

I can use the same code for a cell; in fact, I could make a specific cell within the row above behave differently:
<td class="plain"

An advantage of this approach --beyond keeping the code within the rows and cells a bit briefer-- is that I can easily change other features (e.g., font, as I've done in the example above) at the same time. (Using an approach like "this.style.backgroundColor" will become very cumbersome if you wish to change more than one aspect of the style.)


10+ Year Member

Msg#: 2919 posted 11:41 pm on Dec 17, 2004 (gmt 0)

onmouseover and onmouseout are good but event bubling makes it bad((


10+ Year Member

Msg#: 2919 posted 3:44 pm on Dec 21, 2004 (gmt 0)

onmouseover and onmouseout are good but event bubling makes it bad((

When I wrote this I found that the problem was not related to event bubbling. The trick is... if you assign a style to a TD then it will no longer inherit from the TR. Notice below how 'inherit' is used:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Table Cursor</title>
<meta name='author' content='Mike Foster, Cross-Browser.com'>
<style type='text/css'>
td {
.xtcDefault {
color:#000; background-color:#fff;
.xtcSelected {
color:#fff; background-color:#00f;
.xtcHover {
color:#00f; background-color:#ccf;
.xtcInherit {
color:inherit; background-color:inherit;
<script type='text/javascript'>
var xtc;
window.onload = function()
xtc = new xTableCursor('table1', 'xtcInherit', 'xtcDefault', 'xtcHover', 'xtcSelected');
window.onunload = function()

/* Functions from the X Library, licensed LGPL:

/* xTableCursor - mouseover highlight on rows and cells.
id - table id.
inh - inherit style.
def - default style.
hov - row hover style.
sel - cell selected style.
function xTableCursor(id, inh, def, hov, sel)
var tbl = xGetElementById(id);
if (tbl) {
xTableIterate(tbl, init);
function init(obj, isRow)
if (isRow) {
obj.className = def;
obj.onmouseover = trOver;
obj.onmouseout = trOut;
else {
obj.className = inh;
obj.onmouseover = tdOver;
obj.onmouseout = tdOut;
this.unload = function() { xTableIterate(tbl, done); }
function done(o) { o.onmouseover = o.onmouseout = null; }
function trOver() { this.className = hov; }
function trOut() { this.className = def; }
function tdOver() { this.className = sel; }
function tdOut() { this.className = inh; }

function xGetElementById(e)
if(typeof(e)!='string') return e;
if(document.getElementById) e=document.getElementById(e);
else if(document.all) e=document.all[e];
else e=null;
return e;
// documentation is available for this function:
function xTableIterate(sec, fnCallback, data)
var r, c;
sec = xGetElementById(sec);
if (!sec !fnCallback) { return; }
for (r = 0; r < sec.rows.length; ++r) {
if (false == fnCallback(sec.rows[r], true, r, c, data)) { return; }
for (c = 0; c < sec.rows[r].cells.length; ++c) {
if (false == fnCallback(sec.rows[r].cells[c], false, r, c, data)) { return; }


<table id='table1'>



10+ Year Member

Msg#: 2919 posted 3:48 pm on Dec 21, 2004 (gmt 0)

Hmmm... the [code] and [pre] tags don't preserve formatting - or am I doing something wrong?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved