Welcome to WebmasterWorld Guest from 54.226.241.8

Forum Moderators: open

Message Too Old, No Replies

Highlighting td and tr

     

orion_rus

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

10+ Year Member



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?

mcibor

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

WebmasterWorld Senior Member 10+ Year Member



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

bruhaha

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

10+ Year Member



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.)

orion_rus

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

10+ Year Member



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

MikeFoster

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

10+ Year Member



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>

MikeFoster

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

10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month