Welcome to WebmasterWorld Guest from 50.19.190.144

Forum Moderators: open

Message Too Old, No Replies

Highlighting td and tr

     
7:51 pm on Dec 17, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Oct 3, 2004
posts:598
votes: 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?
9:24 pm on Dec 17, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 26, 2003
posts:1133
votes: 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:

<tr
onmouseover="this.style.backgroundColor='rgb(0,0,0)';"
onmouseout="this.style.backgroundColor='rgb(20,20,20)';">

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

9:54 pm on Dec 17, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Dec 10, 2001
posts:254
votes: 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"
onmouseover="this.className='hilite';"
onmouseout="this.className='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"
onmouseover="this.className='hilite2';"
onmouseout="this.className='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.)

11:41 pm on Dec 17, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Oct 3, 2004
posts:598
votes: 0


onmouseover and onmouseout are good but event bubling makes it bad((
3:44 pm on Dec 21, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:July 20, 2001
posts:137
votes: 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">
<html>
<head>
<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 {
padding:4px;
}
.xtcDefault {
color:#000; background-color:#fff;
}
.xtcSelected {
color:#fff; background-color:#00f;
}
.xtcHover {
color:#00f; background-color:#ccf;
}
.xtcInherit {
color:inherit; background-color:inherit;
}
</style>
<script type='text/javascript'>
var xtc;
window.onload = function()
{
xtc = new xTableCursor('table1', 'xtcInherit', 'xtcDefault', 'xtcHover', 'xtcSelected');
}
window.onunload = function()
{
xtc.unload();
}

/* 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; }
}
}
}
</script>
</head>
<body>

<h1>xTableCursor</h1>

<table id='table1'>
<tr><td>t1r1c1</td><td>t1r1c2</td><td>t1r1c3</td><td>t1r1c4</td><td>t1r1c5</td><td>t1r1c6</td><td>t1r1c7</td></tr>
<tr><td>t1r2c1</td><td>t1r2c2</td><td>t1r2c3</td><td>t1r2c4</td><td>t1r2c5</td><td>t1r2c6</td><td>t1r2c7</td></tr>
<tr><td>t1r3c1</td><td>t1r3c2</td><td>t1r3c3</td><td>t1r3c4</td><td>t1r3c5</td><td>t1r3c6</td><td>t1r3c7</td></tr>
<tr><td>t1r4c1</td><td>t1r4c2</td><td>t1r4c3</td><td>t1r4c4</td><td>t1r4c5</td><td>t1r4c6</td><td>t1r4c7</td></tr>
<tr><td>t1r5c1</td><td>t1r5c2</td><td>t1r5c3</td><td>t1r5c4</td><td>t1r5c5</td><td>t1r5c6</td><td>t1r5c7</td></tr>
<tr><td>t1r6c1</td><td>t1r6c2</td><td>t1r6c3</td><td>t1r6c4</td><td>t1r6c5</td><td>t1r6c6</td><td>t1r6c7</td></tr>
</table>

</body>
</html>

3:48 pm on Dec 21, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:July 20, 2001
posts:137
votes: 0


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