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.

Answer 1

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

Answer 2

might work

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

Answer 3

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>