Efficiently detecting a click in a large table

[squash+go@math.ufl.edu]

For an abstract algebra class that I will be teaching,
I'm trying to convert a text-based game that I wrote
in Common Lisp to a graphical game in javascript. (I
know nothing of javascript, but I have three books
from the library that I have been s*l*o*w*l*y going
through.)

Currently I have a large, say, 30x20, table

<table id="GameTable" >
<tr<td>A</td<td>B</td<td>C</td... </tr>
<tr<td>D</td<td>E</td<td>F</td... </tr>
...
</table>

I'm accessing elements via

var game_table = document.getEle mentById('GameT able');
var curr_cell;

function game_node(x,y) {
curr_cell = game_table.rows[x].cells[y];
return(curr_cel l.firstChild);
};

and I'm able to write/read to

game_node(x,y). nodeValue

just fine. But here's where I'm stuck:

I'd like, when the user clicks on, say, cell (3,5),
that a function-call

UpdateGame(3,5)

is invoked. Is there a way I can do this NEITHER
having an "onclick=" NOR an "id=" for each and every
<td>? I seek something like having a single "id=" and
"onclick=" for the entire table, e.g,

<table id="GameTable"
onclick="Update Game(this.rowIn dex, this.colIndex)" >

where -somehow- variables rowIndex and colIndex were
automagically set by the mouse-click.

Ta, Jonathan King Math dept, Univ. of Florida

[P. Prikryl]

Re: Efficiently detecting a click in a large table

You can use event.target/event.srcElemen t to determine the clicked
node and check if it is inside the table. Then you can use cellIndex
and rowIndex properties of the cell and row to get the coordinates.

Simple sample (function to handle the click must be set after the
element id="GameTable" is loaded):
document.getEle mentById("GameT able").onclick = function(e) {
e = e || window.event;

for (var td = e.target || e.srcElement; td && td != this; td =
td.parentNode)
if (td.tagName == "TD" && td.parentNode.p arentNode.paren tNode ==
this) {
UpdateGame(td.p arentNode.rowIn dex, td.cellIndex);
break;
}
}

[Peter Michaux]

Re: Efficiently detecting a click in a large table

On May 18, 11:37 pm, "P. Prikryl" <p.prik...@gmai l.comwrote:

You can use event.target/event.srcElemen t to determine the clicked
node and check if it is inside the table. Then you can use cellIndex
and rowIndex properties of the cell and row to get the coordinates.

For Google food, this has been termed "event delegation" meaning a
parent element is watching for events that bubble up from child
elements.

http://yuiblog.com/blog/2007/01/17/event-plan/

http://developer.yahoo.com/yui/examples/event/event-delegation.html

Peter

[Thomas 'PointedEars' Lahn]

Re: Efficiently detecting a click in a large table

Peter Michaux wrote:

On May 18, 11:37 pm, "P. Prikryl" <p.prik...@gmai l.comwrote:

>You can use event.target/event.srcElemen t to determine the clicked
>node and check if it is inside the table. Then you can use cellIndex
>and rowIndex properties of the cell and row to get the coordinates.

>
For Google food, this has been termed "event delegation" meaning a
parent element is watching for events that bubble up from child
elements.
>

http://yuiblog.com/blog/2007/01/17/event-plan/

http://developer.yahoo.com/yui/examp...elegation.html

However, the technically correct no-buzzword term is "Event bubbling"
(mentioned here before) or, more generally, "Event dispatch":

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

http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[squash+go@math.ufl.edu]

Re: Efficiently detecting a click in a large table

On May 19, 2:37 am, "P. Prikryl" <p.prik...@gmai l.comwrote:

You can use event.target/event.srcElemen t to determine ...

Thank you (dziekuje bardzo) P. Prikryl, Peter and Thomas.

The code works for me in FF under MacOSX, and there are a
few places where I don't know how/why it works. Currently,
inside <BODY></BODYI have

<table id="GameTable" >
<tr<td>AA</td<td>BB</td<td>CC</td</tr>
<tr<td>DD</td<td>EE</td<td>FF</td</tr>
</table>

<script language="JavaS cript">
function UpdateGame(x,y) {alert("USER clicked (" + x + "," + y +
").")};

document.getEle mentById("GameT able").onclick = function(e) {
e = e || window.event;
for (var tdvar = e.target || e.srcElement;
tdvar && tdvar != this;
tdvar = tdvar.parentNod e)
if (tdvar.tagName == "TD" &&
tdvar.parentNod e.parentNode.pa rentNode == this) {
UpdateGame(tdva r.parentNode.ro wIndex, tdvar.cellIndex );
break;
}
};
</script>

Q1: Why is "TD" capitalized? I understand that HTML is
case-insensitive whereas JS is sensitive. The ==
comparison is done at the JS level; how did you know to use
uppercase?

Q2: Why 3 levels of parentNode, rather than 2, in

tdvar.parentNod e.parentNode.pa rentNode == this

? Is it that `tdvar' is bound to an event whose parent is
<TD>? Or is it that `tdvar' is bound to <TD>, but that an
implicit <TBODYis being inserted into my innocent
<table>? --I am inferring the latter from this page:

http://htmlhelp.com/reference/html40/tables/tbody.html

I haven't looked at HTML for a l*o*n*g time, I don't
remember there even being a <TBODYtag when I was
designing the few tables I use on my site.

Ta, Jonathan King Math dept, Univ. of Florida

[=?ISO-8859-1?Q?=22=C1lvaro_G=2E_Vicario=22?=]

Re: Efficiently detecting a click in a large table

squash+go@math. ufl.edu escribió:

Q1: Why is "TD" capitalized? I understand that HTML is
case-insensitive whereas JS is sensitive. The ==
comparison is done at the JS level; how did you know to use
uppercase?

You've said it all, that's how JavaScript works:

>>"a"=="A"

false

>>"A"=="A"

true

Q2: Why 3 levels of parentNode, rather than 2, in
>
tdvar.parentNod e.parentNode.pa rentNode == this

Again, you got the key yourself: TBODY.

In general, you have an HTML source code that is parsed by the browser
and converted into a DOM tree. What you can manipulate with JavaScript
is the resulting node tree. This becomes more evident if you have
invalid markup like "<div>Foo</p>".

I suggest you install the Firebug extension for Firefox and have a look
at the DOM tree. Once you get used to Firebug you can't code without it.


--
-- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
-- Mi sitio sobre programación web: http://bits.demogracia.com
-- Mi web de humor al baño María: http://www.demogracia.com
--

[Peter Michaux]

Re: Efficiently detecting a click in a large table

On May 19, 6:23 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

Peter Michaux wrote:

On May 18, 11:37 pm, "P. Prikryl" <p.prik...@gmai l.comwrote:

You can use event.target/event.srcElemen t to determine the clicked
node and check if it is inside the table. Then you can use cellIndex
and rowIndex properties of the cell and row to get the coordinates.

>

For Google food, this has been termed "event delegation" meaning a
parent element is watching for events that bubble up from child
elements.

>

http://yuiblog.com/blog/2007/01/17/event-plan/

http://developer.yahoo.com/yui/examp...elegation.html

>
However, the technically correct no-buzzword term is "Event bubbling"
(mentioned here before) or, more generally, "Event dispatch":
>
http://www.w3.org/TR/DOM-Level-2-Eve...vents-20071221

"Event bubbling" is the mechanics of the chain of responsibility
pattern implemented in the DOM. It is just the fact that an event
does bubble.

"Event delegation" is an application-level concept of how a bubbling
event is used. If a ancestor node is handling an event on behalf of a
node that would normally handle the event itself then that is event
delegation. Event bubbling is what makes event delegation possible.

Peter

[Thomas 'PointedEars' Lahn]

Re: Efficiently detecting a click in a large table

Peter Michaux wrote:

On May 19, 6:23 am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

>Peter Michaux wrote:

>>On May 18, 11:37 pm, "P. Prikryl" <p.prik...@gmai l.comwrote:
>>>You can use event.target/event.srcElemen t to determine the clicked
>>>node and check if it is inside the table. Then you can use cellIndex
>>>and rowIndex properties of the cell and row to get the coordinates.
>>For Google food, this has been termed "event delegation" meaning a
>>parent element is watching for events that bubble up from child
>>elements.
>>http://yuiblog.com/blog/2007/01/17/event-plan/
>>http://developer.yahoo.com/yui/examp...elegation.html

>However, the technically correct no-buzzword term is "Event bubbling"
>(mentioned here before) or, more generally, "Event dispatch":
>>
>http://www.w3.org/TR/DOM-Level-2-Eve...vents-20071221

>
"Event bubbling" is the mechanics of the chain of responsibility
pattern implemented in the DOM. It is just the fact that an event
does bubble.
>
"Event delegation" is an application-level concept of how a bubbling
event is used. If a ancestor node is handling an event on behalf of a
node that would normally handle the event itself then that is event
delegation. Event bubbling is what makes event delegation possible.

Read again.


PointedEars
--
var bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

[squash+go@math.ufl.edu]

Re: Efficiently detecting a click in a large table

On May 19, 12:35 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:
....

Must be at least
>
<script type="text/javascript">
>
The `language' attribute is deprecated, the `type' attribute is required:

Ah; ta,

Q1: Why is "TD" capitalized? ...

>
See <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-822762427>.
>
However, as XHTML may also be served as text/html in which case it may
be parsed as HTML, I consider case-insensitive matching to be less
error-prone:
>
if (tdvar.tagName. toLowerCase() == "td" ...)

Good; I'm going to make this my std practice.

I haven't yet processed your more technical comments; I'm still
reading
the textbooks. Thanks again.

Jonathan King Math dept, Univ. of Florida