除了单击jQuery中的选择框外，如何使用表中单击单元格

Question

have a table which containing some images and some select boxes .I want to highlight row whenever user click on that row(means any td) except select boxes and images

Now i am using this,

$("selector").live("click",function() {
    $(this)
        .parents("tr:first")
        .toggleClass("diffColor")
    ;
});

But it is applying the class if i click on select box or image.But i dont need when i click on select box or any other images.

see here

Thanks in advance...

Answer 1

Try this:

$(".selector").on("click", function (e) {
    if (e.target === this) $(this).parent("tr:first").toggleClass("diffColor");
});

Assumming the fact that .selector is the class name for all the td

Here, this means the element in the current scope, which is always the td clicked here.

and e.target means the element actually clicked, which can be td or checkbox or anything inside the td .

So, in case the element actually clicked is not the td in the current scope, e.target === this return false and nothing happens (no click event is fired) and vice-versa.

Answer 2

If you don't want to toggleClass when clicking on a td which contains an <img> or <select> you can do the following:

$('selector').live('click', function() {
    if (!$(this).has('select, img').length) {
      $(this).parents('tr:first').toggleClass('diffColor');
    }
});

Here's your updated fiddle

Answer 3

I have solution with checking if the TD contains image or select box.

$("#tableId td").on("click",function() {  
     var ths=$(this);    
     if((ths.has("select").length ? false : true)&&(ths.has("img").length ? false : true)){
         $(this).parent().toggleClass("diffColor");
     }
    });

JSFIDDLE

Answer 4

Try this....

$("td").live("click",function() {
$(this)
    .parents("tr:first")
    .toggleClass("diffColor")
;
});

demo

Answer 5

will this be ok for you? just add class "change" to td.

$("#tableId td.change").on("click",function() {
        $(this)
            .parents("tr:first")
            .toggleClass("diffColor")
        ;
    });


<table id="tableId" border="1">
     <thead>
        <th></th>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
     </thead>
     <tbody>
        <td><input type="checkbox"/></td>
        <td class="change">FirstTableColumn1</td>
        <td class="change">FirstTableColumn2</td>
        <td><select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
            <option>DDD</option>
            </select></td>

     </tbody>
   </table>

Answer 6

This happens because your events are bubbling up.

you can add an event.stopPropagation for the click events on the children to prevent this.

so for any input and select elements add the following to prevent propagation. if you already have event handlers for the clicks, add stopPropagation to the beginning of your functions.

$("#tableId").find("input, select")
             .click(function(e){e.stopPropagation();});