473,320 Members | 2,112 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

N6+ event bubble?

Hello all. In N6+ is it possible to have a whole bunch of TD cells
in a table and have a click event handler on the TABLE object that identifies
the clicked cell?

I don't want to have individual click handlers on each TD as the page
will become too large.

So the concept would be something like:

<SCRIPT language="javascript">
function OnClick(E){
alert( some code that identifies the value of the clicked cell );
}
</SCRIPT>

<TABLE onclick="Onclick();">
<TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD></TR>
<TR><TD>6</TD><TD>7</TD><TD>8</TD><TD>9</TD><TD>10</TD></TR>
<TR><TD>11</TD><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD></TR>
<TR><TD>16</TD><TD>17</TD><TD>18</TD><TD>19</TD><TD>20</TD></TR>
<TR><TD>21</TD><TD>22</TD><TD>23</TD><TD>24</TD><TD>25</TD></TR>
<TR><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD><TD>30</TD></TR>
<TR><TD>31</TD><TD>32</TD><TD>33</TD><TD>34</TD><TD>35</TD></TR> etc...
</TABLE>
Jul 23 '05 #1
1 1750
Jesse Wade wrote:
Hello all. In N6+ is it possible to have a whole bunch of TD cells
in a table and have a click event handler on the TABLE object that identifies
the clicked cell?
Yes, and this is actually the approach I prefer, since it permits to
control the entry point in the code (conditional init) and facilitates
the maintenance.
<TABLE onclick="Onclick();">


This was your biggest problem; the construct you've used is similar to:

myTable.onclick = function(event) {
Onclick();
}

The onclick attribute value is in fact wrapped into an anonymous
function, which holds the event object, named "event"; you need to pass
this event object to your inner handler, in order to be able to
determine the original target.

Once you have the event, you'll have to pay attention to its target:
- it can be a text node, in which case you have to go up until
you find the TD,
- it can be a TD,
- it could be an intermediate element (like TR, TBODY) or the table
itself (if clicked on a border, for instance).
---
<script type="text/javascript">
var buf=[];
for(var ii=0; ii<10; ii++){
buf.push("<tr>");
for(var k=1; k<=10; k++){
buf.push("<td id='td"+(k+ii*10)+"'>"+(k+ii*10)+"<\/td>");
}
buf.push("<\/tr>");
}
document.write(
"<table id='MyTable' onclick='foo(event, this)'>"+
buf.join("") +
"<\/table>"
);

function foo(evt, table){
var el;
evt=evt||window.event;
el=evt.target||evt.srcElement;

for(;el&&el!=table;el=el.parentNode)
if(el.nodeName.toLowerCase()=="td")
break;

alert(el.id); //either the td or an intermediate element
}
</script>
---
HTH,
Yep.
Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: kj | last post by:
How does one trigger an event programmatically? I'm interested in how to do this in both the "Level 0" event model as well as in the DOM Level 2 event model. Thanks! kj -- NOTE: In my...
2
by: Kirk Is | last post by:
Hi there. I'm trying to improve a simple javascript based graphics editor for Atari 2600 games (long story) with better use of CSS and Javascript. I'm a little weak on what CSS can and can't...
10
by: David | last post by:
Is there something that I can use to prevent the a user from dragging something, an image for instance. In IE I can use the ondrag = "return false;", is there a way to achieve the same way with...
5
by: Tom Gao | last post by:
Hello friends I'm trying to perform event bubble on a user control from the example on http://odetocode.com/Articles/94.aspx but this example doesn't work... when I run the code it says...
1
by: Lucifer | last post by:
Hi I am trying to raise a bubble event. I have a dropdownlist and a datalist in a datalist. I want to use the postback from the dropdownlist to rebind the nested datalist. But i need the...
0
by: Nathan Sokalski | last post by:
I am using a DataList with Event Bubbling. When I bubble an event, the ItemCommand event is always called before the bubble event specified in the CommandName property. Is this ASP.NET's way of...
17
by: dan_williams | last post by:
I have the following test web page:- <html> <head><title>Test</title> <script language="Javascript"> <!-- function fnTR() { alert("TR"); }
0
by: shapper | last post by:
Hello, I have a few custom controls organized as follows: Parent Child Section User User control raises an event named Updated. This event has custom arguments of type UpdatedEventArgs.
6
by: Jeremy | last post by:
I've got a floating div which becomes visible when a link is clicked. I want the div to be hidden when the user clicks anywhere on the page except for whithin the div. What is the best way to do...
4
by: webgour | last post by:
Hello, I'm having difficulty using attachEvent instead of simply assigning to mouseover in my object Sample03. When i use myImage.onmouseover = this.showmouseover(); in the following all works...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.