homepage Welcome to WebmasterWorld Guest from 54.205.188.59
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Highlighting td and tr
orion_rus




msg:1490177
 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?

 

mcibor




msg:1490178
 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:

<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




msg:1490179
 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"
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




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

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

MikeFoster




msg:1490181
 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">
<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




msg:1490182
 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