By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,691 Members | 1,123 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,691 IT Pros & Developers. It's quick & easy.

How to highlight table cell on mouseDown?

P: n/a


I have set up an HTML table with clickable cells (the cells contain
only text). They work fine, but I would like to give the user some
visual feedback to indicate that a cell has been clicked. I'd like
this feedback to be the usual highlight on mouseDown, un-highlight
on mouseUp, but I can't figure out how to do it. Help?

Thanks in advance!

jill
--
To s&e^n]d me m~a}i]l r%e*m?o\v[e bit from my a|d)d:r{e:s]s.

Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
J Krugman wrote on 02 jul 2004 in comp.lang.javascript:
I have set up an HTML table with clickable cells (the cells contain
only text). They work fine, but I would like to give the user some
visual feedback to indicate that a cell has been clicked. I'd like
this feedback to be the usual highlight on mouseDown, un-highlight
on mouseUp, but I can't figure out how to do it. Help?


<table border=1><tr>
<td
onmousedown="this.style.backgroundColor='yellow'"
onmouseup="this.style.backgroundColor='white'">
1st cell content
</td>
<td
onmousedown="this.style.backgroundColor='yellow'"
onmouseup="this.style.backgroundColor='white'">
2nd cell content
</td>
</tr></table>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #2

P: n/a
J Krugman wrote:
I have set up an HTML table with clickable cells (the cells contain
only text). They work fine, but I would like to give the user some
visual feedback to indicate that a cell has been clicked. I'd like
this feedback to be the usual highlight on mouseDown, un-highlight
on mouseUp, but I can't figure out how to do it. Help?


Use event bubbling.

<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling>

Quickhack:

function hightlight(e, bWhat)
{
if (e)
{
var tgt = e.target || e.srcElement;
var s;
if (tgt
&& tgt.tagName
&& /t[dh]/.test(tgt.tagName.toLowerCase())
&& typeof (s = tgt.style) != "undefined"
&& typeof s.backgroundColor != "undefined"
&& typeof s.color != "undefined")
{
if (bWhat)
{
s.backgroundColor = "...";
s.color = "...";
}
else
{
s.backgroundColor = "";
s.color = "";
}
}
}
}

<table
onmousedown="highlight(event, true)"
onmouseup="highlight(event, false)">
...
</table>
PointedEars
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.