chek where mouse is

[sandip.dhamapurkar]

I have a small html page with a table of grid 7x4 with nothing in there
(no image, no text) just a plain table. Is there any way to track in
which cell the mouse pointer is?

Example, if I move my mouse in cell 0,0 it should highlight the cell
background with red colour

Sandy

 

[Evertjan.]

wrote on 04 apr 2006 in comp.lang.javascript:

I have a small html page with a table of grid 7x4 with nothing in there
(no image, no text) just a plain table. Is there any way to track in
which cell the mouse pointer is?

Example, if I move my mouse in cell 0,0 it should highlight the cell
background with red colour
<td
onmouseover='this.backgroundColor="red"'
onmouseout='this.backgroundColor=""'

[You could use functions and DOM insertion,
but the principle remains the same]

Red is not a good highlighting color, IMHO, use yellow.

 

[sandip.dhamapurkar]

Thanks.

One more question.

If I have to change the color of the adjacent cell to yellow then what
modification will I have to do?

If mouse is on first cell, change the color of the next cell (cell to
the right)

 

[Evertjan.]

wrote on 04 apr 2006 in comp.lang.javascript:

Thanks.

One more question.

What are you talking about again?

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at the
top of the article, then click on the "Reply" at the bottom of the article
headers.

<http://www.safalra.com/special/googlegroupsreply/>

 

[sandip.dhamapurkar]

this.backgroundColor would change color of that cell where the mouse
is. If I have to change the color of the adjacent cell to yellow then
what modification will I have to do?

Lets say, if mouse is on first cell, change the color of the next cell
(cell to the right)

 

[Evertjan.]

wrote on 04 apr 2006 in comp.lang.javascript:

this.backgroundColor would change color of that cell where the mouse
is. If I have to change the color of the adjacent cell to yellow then
what modification will I have to do?

Lets say, if mouse is on first cell, change the color of the next cell
(cell to the right)

If you want answers on usenet, you should try to comply with Netiquette,
and quote relevant part of the posting you are answering on.

As I answered you this is quite possible with google.groups to,
though using a dedicated news-client makes using usenet much easier and
nicer for you.

===========

You can identify the next <td> in a <tr> by doing some clever id-ing:

<td id='r1c1'></td><td id='r1c2'></td>

Or you can try using the DOM to point to the next cell.

The last one I have no experience with, since I am happy with the first.

 

[RobG]

Evertjan. said on 05/04/2006 7:13 AM AEST:

wrote on 04 apr 2006 in comp.lang.javascript:




If you want answers on usenet, you should try to comply with Netiquette,
and quote relevant part of the posting you are answering on.

As I answered you this is quite possible with google.groups to,
though using a dedicated news-client makes using usenet much easier and
nicer for you.

===========

You can identify the next <td> in a <tr> by doing some clever id-ing:

<td id='r1c1'></td><td id='r1c2'></td>

Or you can try using the DOM to point to the next cell.

One-of:

<table>
<tr>
<td onmouseover="
var o;
(o = this.parentNode.cells[this.cellIndex+1])
&& (o.style.backgroundColor='red');
" onmouseout="
var o;
(o = this.parentNode.cells[this.cellIndex+1])
&& (o.style.backgroundColor='white');
">Cell 0</td>
<td>Cell 1</td>
</tr>
</table>


In general:

<table id="TableA">
<tr>
<td>Cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>Cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>

<script type="text/javascript">
function nextHi()
{
var o;
(o = this.parentNode.cells[this.cellIndex+1])
&& (o.style.backgroundColor='red');
}
function nextLo()
{
var o;
(o = this.parentNode.cells[this.cellIndex+1])
&& (o.style.backgroundColor='white');
}
window.onload = function(){
var t, tds;
if ( document.getElementById
&& (t = document.getElementById('TableA'))
&& t.getElementsByTagName
&& (tds = t.getElementsByTagName('td'))){
var i = tds.length;
while (i--){
tds.onmouseover = nextHi;
tds.onmouseout = nextLo;
}
}
}

</script>

 

[Evertjan.]

RobG wrote on 05 apr 2006 in comp.lang.javascript:

<script type="text/javascript">
function nextHi()
{
var o;
(o = this.parentNode.cells[this.cellIndex+1])
&& (o.style.backgroundColor='red');
}
function nextLo()
{
var o;
(o = this.parentNode.cells[this.cellIndex+1])
&& (o.style.backgroundColor='white');
}
window.onload = function(){
var t, tds;
if ( document.getElementById
&& (t = document.getElementById('TableA'))
&& t.getElementsByTagName
&& (tds = t.getElementsByTagName('td'))){
var i = tds.length;
while (i--){
tds.onmouseover = nextHi;
tds.onmouseout = nextLo;
}
}
}

</script>

Well done!

function nextHi(){ nextBoth('red') }
function nextLo(){ nextBoth('white') }
function nextBoth(x){
var o;
if (o = this.parentNode.cells[this.cellIndex+1])
o.style.backgroundColor = x;
}