CODEWITHSUNDEEP
jqueryjquery-selectors
curlyfries
curlyfries

Reputation: 13

jquery: exclude checkbox from selection within table row

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.

Upvotes: 0

Views: 1562

Answers (3)

curlyfries
curlyfries

Reputation: 13

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>

Upvotes: 0

Funky Dude
Funky Dude

Reputation: 3947

might work 

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

Upvotes: 1

Scott Evernden
Scott Evernden

Reputation: 39940

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

Upvotes: 0

Related Questions