Set onClick to tr except for its second td

Question

<tr class="DesignedTableTR" onclick="OpenAdPreview()"> <td></td> <td></td> <td></td> <td></td> </tr> 

I want onclick be installed on all td-s except the second td.

I know I can do it like:

 <tr class="DesignedTableTR"> <td onclick="OpenAdPreview()"></td> <td></td> <td onclick="OpenAdPreview()"></td> <td onclick="OpenAdPreview()"></td> </tr> 

but maybe there is another effective way.

Answer 1

Answer 1 is approved if you are using jQuery . Answer 2 is approved if you use "modern" browsers that support querySelectorAll .

The second also has a drawback: it assigns all <td> event listeners, which is a rather difficult approach. Your first attempt to put the event handler only on <tr> is actually lighter (by the way, this is called event delegation ), but there is also one small down: you need to filter the correct element.

So, if you want to stick with the cross browser " vanilla javaScript ", you can try the following:

First put this and event as arguments to call your function: onclick="OpenAdPreview(event, this)" , then change your OpenAdPreview function to this:

 function OpenAdPreview(event, that){ var e = event || window.event, elm = e.target || e.srcElement, allTDs = that.getElementsByTagName('td'); while (elm.nodeName.toLowerCase() !== 'td' && elm !== that) { elm = elm.parentNode; // get the right element if it not the td already } if (elm !== allTDs[1] && elm !== that) { // this filters out your second td ... here goes your code } } 

that provides a <tr> where you can find all td with getElementsByTagName and then filter out.

Another (and best) way is to assign a class name to td that you don’t want to click and filter with this: <td class="dont-touch-me"></td> , and then in your code:

 if ((' ' + elm.className + ' ').indexOf('dont-touch-me') < 0) { ... 

This way your code is independent of your layout. Then it always saves to change the class names of your HTML markup, and your code still works as expected.

By the way: inline events are not a good way. Try to stick to traditional event handler assignments such as .addEventListener , .attachEvent or jQuery.on() event handling. Thus, you also do not need to deal with this , that and event .

Added JSFiddle: http://jsfiddle.net/5zxun/4/

Answer 2

Use :not() and :nth-child() selectors.

 $("tr.DesignedTableTR > td:not(:nth-child(2))").on("click", OpenAdPreview); 

Answer 3

Another way to do

 <tr class="DesignedTableTR" onclick="OpenAdPreview()"> <td></td> <td onclick="event.cancelBubble=true; return false;"></td> <td></td> <td></td> 

Answer 4

ok you can do it:

 // its zero-based so second td would be at 1st index, so bind all td onclick instead of second td $("tr.DesignedTableTR > td:not(:eq(1))").on("click",function(){ alert("clicked :" + $(this).html()); }); 

working fiddle here: http://jsfiddle.net/5zxun/2/

Hope this helps.

Answer 5

The usual (but "modern") JavaScript solution:

 var tds=document.querySelectorAll("tr.DesignedTableTR td:not(:nth-of-type(2))"); var len = tds.length; for(var i=0; i< len; i++){ tds[i].onclick=function(){ //.. here you go } } 

JSFiddle: http://jsfiddle.net/cherniv/5zxun/

Answer 6

You can use the td index value to prevent the click event of your choice.

 $(document).ready(function(){ $('tr.DesignedTableTR td').click(function(){ if($(this).index()==1){ ev.preventDefault(); return false; }else{ alert($(this).index()); //your code here } }); }); 

JSFiddle: http://jsfiddle.net/5zxun/1/

Answer 7

If you use jQuery, you can stick with event delegation first, as it is lighter, secondly, you want to separate your HTML from your javaScript code, which means: if you ever decided to make your layout different, say your second <td> should now be clickable, but not your third, but you are the 7th ... then you have to change your code.

If you assign classes to your <td> , then you can just change your HTML and your code will work as expected.

 <tr class="DesignedTableTR"> <td></td> <td class="dont-toch-me"></td> <td></td> <td></td> <td></td> <td class="dont-toch-me"></td> <td></td> </tr> 

and in your code:

 $("tr.DesignedTableTR").on("click", "td:not(.dont-toch-me)", function(event){ // ... here goes your code }); 

So, the event (and only one) is on <tr> , and the second argument .on is your filter. This is called event delegation .

JSFiddle: http://jsfiddle.net/5zxun/9/