jquery: exclude checkbox from selection within table row

Question

I have a table and have a jquery script that does two things:

1) When a row gets moused-over, the background color is changed by adding a hover class

2) The link contained in the row is used to make the entire row a link.

<script type="text/javascript">
$(document).ready(function() {
    var target = 'table.mytable tr.allrows';
    var hoverClass = 'allrows_hover';

    $(target).each(function() {
        $(this).hover(
            function() {
                $(this).addClass(hoverClass);
                status = $(this).find('a').attr('href');
            },
                function() {
                    $(this).removeClass(hoverClass);
                    status = '';
                });
        $(this).click(function() {
            location = $(this).find('a').attr('href');
        });
        $(this).css('cursor', 'pointer');
    });
});
</script>

Now the trouble is, I have a checkbox in one column on each row, and when I check the box it follows the link.

I considered excluding that column from the above but can't get that to work. Can anyone help me find a way to exclude either the td or - even better - the checkbox itself so I can click it but still get the nice hover effect on the rest of the row?

Thanks in advance.

Funky Dude · Accepted Answer · 2009-09-21 02:44:37Z

1

might work

  $(this).click(function(e) {
                location = $(this).find('a').attr('href');
                e.stopPropagation();
                return false;
            });

answered Sep 21, 2009 at 2:44

Funky Dude

3,9672 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Evernden Over a year ago

i think you mean to have stopPropagation applied to event handler for checkbox click to prevent bubbling up to parent - that would also work

Scott Evernden · Accepted Answer · 2009-09-21 02:44:03Z

0

your click handler receives a jQuery event object. the target attribute should indicate what dom element received the click. in your case, you'd not assign to location if the e.target is the checkbox .. not tested on your code, but I've done similar

answered Sep 21, 2009 at 2:44

Scott Evernden

40.1k15 gold badges81 silver badges84 bronze badges

Comments

curlyfries · Accepted Answer · 2009-09-21 02:53:55Z

Well, I have a solution. Not sure it's the best, but...

I added a class 'noclick' to the tds containing the checkbox. This will add the hover class to the entire row when mousing-over any of the cells in that row, but will not create a link for the cells with the 'noclick' class.

<script type="text/javascript">
$(document).ready(function() {
    var target = 'table.mytable tr.allrows td';
    var hoverClass = 'allrows_hover';

    $(target).each(function() {
        $(this).hover(
            function() {
                $(this).parent().addClass(hoverClass);
                status = $(this).parent().find('a').attr('href');
            },
                function() {
                $(this).parent().removeClass(hoverClass);
                    status = '';
                });
        $(this).not('td.noclick').click(function() {
            location = $(this).parent().find('a').attr('href');
        });
        $(this).not('td.noclick').css('cursor', 'pointer');
    });
});
</script>

Collectives™ on Stack Overflow

jquery: exclude checkbox from selection within table row

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related