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

Efficiently detecting a click in a large table

P: n/a
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.getElementById('GameTable');
var curr_cell;

function game_node(x,y) {
curr_cell = game_table.rows[x].cells[y];
return(curr_cell.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="UpdateGame(this.rowIndex, this.colIndex)">

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

Ta, Jonathan King Math dept, Univ. of Florida
Jun 27 '08 #1
Share this Question
Share on Google+
8 Replies


P: n/a
You can use event.target/event.srcElement 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.getElementById("GameTable").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.parentNode.parentNode ==
this) {
UpdateGame(td.parentNode.rowIndex, td.cellIndex);
break;
}
}
Jun 27 '08 #2

P: n/a
On May 18, 11:37 pm, "P. Prikryl" <p.prik...@gmail.comwrote:
You can use event.target/event.srcElement 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

Peter
Jun 27 '08 #3

P: n/a
Peter Michaux wrote:
On May 18, 11:37 pm, "P. Prikryl" <p.prik...@gmail.comwrote:
>You can use event.target/event.srcElement 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...ml#Events-flow
http://www.w3.org/TR/2007/WD-DOM-Lev...vents-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
Jun 27 '08 #4

P: n/a
On May 19, 2:37 am, "P. Prikryl" <p.prik...@gmail.comwrote:
You can use event.target/event.srcElement 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="JavaScript">
function UpdateGame(x,y) {alert("USER clicked (" + x + "," + y +
").")};

document.getElementById("GameTable").onclick = function(e) {
e = e || window.event;
for (var tdvar = e.target || e.srcElement;
tdvar && tdvar != this;
tdvar = tdvar.parentNode)
if (tdvar.tagName == "TD" &&
tdvar.parentNode.parentNode.parentNode == this) {
UpdateGame(tdvar.parentNode.rowIndex, 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.parentNode.parentNode.parentNode == 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
Jun 27 '08 #5

P: n/a
sq*******@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.parentNode.parentNode.parentNode == 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
--
Jun 27 '08 #6

P: n/a
On May 19, 6:23 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
Peter Michaux wrote:
On May 18, 11:37 pm, "P. Prikryl" <p.prik...@gmail.comwrote:
You can use event.target/event.srcElement 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
Jun 27 '08 #7

P: n/a
Peter Michaux wrote:
On May 19, 6:23 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
>Peter Michaux wrote:
>>On May 18, 11:37 pm, "P. Prikryl" <p.prik...@gmail.comwrote:
You can use event.target/event.srcElement 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 bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Jun 27 '08 #8

P: n/a
On May 19, 12:35 pm, Thomas 'PointedEars' Lahn <PointedE...@web.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
Jun 27 '08 #9

This discussion thread is closed

Replies have been disabled for this discussion.