jquery:从表行中的选择中排除复选框

时间:2009-09-21 02:33:51

标签: jquery jquery-selectors

我有一个表并且有一个jquery脚本可以完成两件事:

1)当一行被moused-over时,通过添加悬停类来改变背景颜色

2)行中包含的链接用于使整行成为链接。

<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>

现在麻烦的是,我在每行的一列中都有一个复选框,当我选中该复选框后,它会跟在链接之后。

我考虑从上面排除该列,但无法使其工作。任何人都可以帮我找到一种方法来排除td或 - 甚至更好 - 复选框本身所以我可以点击它但仍然可以在行的其余部分获得漂亮的悬停效果?

提前致谢。

3 个答案:

答案 0 :(得分:1)

可能有效

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

答案 1 :(得分:0)

您的点击处理程序会收到jQuery event object。 target属性应指示dom元素接收到的单击。在你的情况下,如果e.target是复选框,你不会分配到位置..没有在你的代码上测试过,但我已经做了类似的

答案 2 :(得分:0)

好吧,我有一个解决方案。不确定它是最好的,但是......

我在包含复选框的tds中添加了一个“noclick”类。当鼠标移动到该行中的任何单元格时,这会将悬停类添加到整行,但不会为具有'noclick'类的单元格创建链接。

<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>