jquery：从表格行中的选择中排除复选框答案

【问题标题】：jquery: exclude checkbox from selection within table rowjquery：从表格行中的选择中排除复选框
【发布时间】：2010-11-29 23:19:25
【问题描述】：

我有一个表和一个 jquery 脚本，它做两件事：

1) 当鼠标悬停在一行时，通过添加一个悬停类来改变背景颜色

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 或 - 甚至更好 - 复选框本身，这样我就可以点击它，但仍然可以在行的其余部分获得很好的悬停效果？

提前致谢。

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

可能有用

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

【讨论】：

我认为您的意思是将 stopPropagation 应用于复选框单击的事件处理程序以防止冒泡到父级 - 这也可以工作

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

我在包含复选框的 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>

【讨论】：