tags:

views:

78

answers:

4

The following doesn't work for firefox. I'm trying delete the table row on click. Can anyone please help. Many thanks.

<INPUT TYPE="Button" onClick="delRow()" VALUE="Remove">

function delRow(){
   if(window.event){
      var current = window.event.srcElement;
   }else{
      var current = window.event.target;
   }
   //here we will delete the line
   while ( (current = current.parentElement) && current.tagName !="TR");
        current.parentElement.removeChild(current);
}
A: 

You have to use event.target instead of window.event.target to work for Firefox. Try to use the following.

<INPUT TYPE="Button" onclick="delRow()" VALUE="Remove">

function delRow(){
   if(window.event){
      var current = window.event.srcElement;
   }else{
      current = event.target;
   }
   //here we will delete the line
   while ( (current = current.parentElement) && current.tagName !="TR");
        current.parentElement.removeChild(current);
}
Multiplexer
I think you also need to change the click handler to onclick="delRow(event)"
Annie
A: 

Here's Mozilla's documentation of the Event class; might give you some insight.

Michael Louis Thaler
A: 

It's worth noting this guy has a great article on events if you aren't using a framework like jQuery:

http://www.quirksmode.org/js/introevents.html

dana
+4  A: 
  1. window.event is IE only. window.event does not exist in W3C standard.
  2. event object by default is pass in as the first argument to a event handler with the W3C standard.
  3. an inline onlick event in the markup calling a function mean that the event handler is calling that function. With your markup as example. It mean function() { delRow(); }. As you can see you won't be able to see the event object in delRow() except when you are in IE because event is in the window object.
  4. parentElement is also IE only, in most case changing it to parentNode would work. Assuming the parent node is also an element.

I suggest you to use javascript library such as jQuery or change your code if you need to keep things relatively the same.

<INPUT TYPE="Button" onclick="delRow(event);" VALUE="Remove">

function delRow(e) {
    var evt = e || window.event; // this assign evt with the event object
    var current = evt.target || evt.srcElement; // this assign current with the event target
    // do what you need to do here
}
airmanx86
+1. Actually the way you've done it there, there's no need for the `var evt = e || window.event`, since all browsers will pass the event object to `delRow()`.
Tim Down
@Tim, you are right. That's because I am used to assigning the event handler directly. e.g. button.onclick = function(e) { //do something };
airmanx86