[thelist] adding an event to a DOM dynamically added row

Cake cake at brothercake.com
Sat Mar 15 10:28:21 CST 2003


> I am adding rows to a table with the DOM. They now want to 
> add an onclick event as well. They were trying setAttribute() 
> with no success. Anyone know how we could accomplish this? 

Mozilla will let you addEventListener to any object:

  obj.addEventListener("click",functionToCall,false);

Opera 7 does support the setAttribute method for event-handlers, but
it's a bit flaky; the only IE method I know of (which, happily, also
works in moz and opera 7) is a bit of a hack:

  //get the TD's parent row
  tempObj = obj.parentNode;

  //store the innerHTML of the row
  tempHTML = tempObj.innerHTML;

  //write-in handlers by string replacement
  //(using a regex because IE returns upper-case tag names)
  tempHTML = tempHTML.replace(/<[Tt][Dd]/g,"<td
onclick='functionToCall()'");

  //rewrite to row
  tempObj.innerHTML = tempHTML;

You could purify it a bit by sniffing for addEventListener support:

  if(typeof document.addEventListener!="undefined") {
    ...
    }
  else {
    ...
    }     




James




More information about the thelist mailing list