Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

setAttribue and Events on IE

Status
Not open for further replies.

iokosan

Programmer
Feb 3, 2009
3
IT
Hi guys, I've a problem using setAttribut and event. Let me explain in detail: I have to create a table with js, and set an onClick event on every cell, so that a function with argument "this" is executed every time the user click on a table cell.
To do so, I've coded something like:
Code:
<html>
<body>
<script>
function insert_table(){
    var t = document.createElement("table");
    var tb = document.createElement("tbody");
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    td.setAttribute('onClick','aa(this)');
    td.innerHTML = 'a';
    tr.appendChild(td);
    tb.appendChild(tr);
    t.appendChild(tb);
    document.body.appendChild(t);        
}

function aa(t){
    alert(t.innerHTML);
}
insert_table();
</script>
</body>
</html>
In the example, I've created a table with only one cell, but in reality I need a far complex table. The fact is, even with this simple source, i get what i want in firefox, but with IE i can't get the onclick event executed ...
Can someone tell me where's the "mistake"?
 
I'd replace this:

Code:
td.setAttribute('onClick','aa(this)');

with this:

Code:
td.onclick = aa;

And then refer to 'this' in function 'aa'.

the only thing I don't remember is if 'this' will be the element the event was fired by, or the one it was attached to.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Well... testing in IE 7 and Fx 3 shows it to be the latter - always the TD, no matter what element inside the cell was clicked.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
[tt][red]//[/red]td.setAttribute('onClick','aa(this)');
td.onclick=function() {aa(this));[/tt]
 
You cant set event handlers as attributes when you are generating a table using DOM methods.
There are attachEvent method in IE and addEventListener method supported by other browsers.

But in your case - as much as i understand it - the old-fashion object.event=function works fine.

Code:
// so instead of
 
td.setAttribute('onClick','aa(this)'); 

// try fallowing code:

td.onclick=function(){  aa(this); }


Avar Pentel
 
Thanks for the fast reply :)
I've just tested my script change the setAttribute line with
Code:
td.onclick = aa;
but, in this way, the script doesn't work at all ( firefox and IE).
And, even if it would have worked, i'd have a problem with "this"...
 
@ tsuji and AvarPentel: thanks a lot, now the example works :)
The "real" program still has some problem, but i'll try to figure out that myself!
Thanks to all again!
 
I've just tested my script change the setAttribute line with
CODE
td.onclick = aa;
but, in this way, the script doesn't work at all ( firefox and IE).
And, even if it would have worked, i'd have a problem with "this"...

I copied your code, made the changes I'd suggested, and it worked perfectly in IE 7 and Fx 3, so perhaps you made a typo somewhere?

Also, why would you have a problem using 'this'?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top