• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3515
  • Last Modified:

How to override TR's events with TD's events?

Hai,

Here is an sample code.
<table width="95%" cellspacing="0" cellpadding="0" border="1">
      <tr onclick="javascript:alert('here')" style="cursor:hand">
            <td>One</td>
            <td>Two</td>
            <td onclick="javscript:return false;"><input type="text" name="txtsome" id="txtsome" value="Three" onclick="javscript:return false;"></td>
            <td>Four</td>
      </tr>
</table>

>><tr onclick="javascript:alert('here')" style="cursor:hand">
I've given alert on TR's onclick event

>><td onclick="javscript:return false;">
Tried to override TR's onclick.

What I need is, I just need to skip alert window if I click on specific TD...

I have some other workarounds for this, but I would rather go straight forword on this.

Other solutions would be
1. remove the TR's event and add it on TD's event except specific TD's
2. assign ID's to TD and call a javascript function by passing the TD's so that in javascript function can ignore it's from specific TD.

Bye
Ajai
0
ajaikumarr
Asked:
ajaikumarr
  • 4
  • 2
  • 2
  • +1
2 Solutions
 
archrajanCommented:
How abt this?
<table width="95%" cellspacing="0" cellpadding="0" border="1">
     <tr >
          <td>One</td>
          <td>Two</td>
          <td onclick="javascript:alert('here')" style="cursor:hand"><input type="text" name="txtsome" id="txtsome" value="Three"></td>
          <td>Four</td>
     </tr>
</table>
0
 
Michel PlungjanIT ExpertCommented:
<script>
ok2click=true
</script>
<table width="95%" cellspacing="0" cellpadding="0" border="1">
     <tr onclick="if (ok2click) alert('here');ok2click=true" style="cursor:hand">
          <td>One</td>
          <td>Two</td>
          <td onclick="ok2click=false"><input type="text" name="txtsome" id="txtsome" value="Three" onclick="ok2click=false"></td>
          <td>Four</td>
     </tr>
</table>
0
 
Michel PlungjanIT ExpertCommented:
archrajan I think you misunderstood
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
archrajanCommented:
Oh, sorry i thought he wanted to shift the onclick event to the specific td
0
 
anthonywjones66Commented:
It's very browser dependant because IE and Mozilla have very different models for managing the hieararchy of events.   IE uses a event bubbling concept where an event generated by a user clicking on a TD causes an event to fire on the TD then on the parent TR then on... all the way to the root window.

Mozilla reverses the process the ultimate parent sees the event first then the next child and so on.  Hence it's very tricky handle this cross-browser and messy on Mozilla.

However on IE it's easy.

<td onlick="event.cancelBubble = true" >

Anthony.
0
 
Michel PlungjanIT ExpertCommented:
The code I posted works in IE6.02, Mozilla 1.7.3  and Firefox 1.0.2 on win2k
0
 
anthonywjones66Commented:
mplungjan,

I stand corrected clearly mozzila is getting the event for the TD before the TR does.  Wonder where I got that idea from.??

Isn't the onclick on the input is unnecessary? just the onclick on the TD will do?

Anthony.
0
 
Michel PlungjanIT ExpertCommented:
I did no test without it. Just applied it to all items asked
0
 
ajaikumarrAuthor Commented:
Hai,

anthonywjones66 sugession is exactly what i need.... It works great with IE 6 & Firefox 1.x.

Thanks.
Ajai
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now