Question

我目前有一个html表（有2列），我试图为这个表添加各种效果，如表格行悬停效果，表格点击效果等...这是我现在使用的脚本及其到目前为止工作正常：

<head>
<script type="text/javascript"> 
$(document).ready(function(){   

    //the following script is to change the table row bg color when clicked
    $('tr').click(function(){
    $('tr td').css({ 'background' : 'none'});
    $('td', this).css({ 'background-color' : '#CCC' });
  }); 

    //the following script is for the table row hover effect
    $('tr').hover(function() {
            $(this).css('background-color', '#FFFF99');
        },
        function() {
            $(this).css('background-color', '#FFFFFF');
            $(this).contents('td').css('border', 'none');
        });


});  
</script>

</head>

<body>
<table>
<tr>
<td> <a href="#">Movie Part 1</a></td>
<td>01:23:26</td>
</tr>

<tr>
<td> <a href="#">Movie Part 1</a></td>
<td>01:23:26</td>
</tr>

</table>

</body>

从上面的模板中，您可以看到我有2列用于此表，1列的标签带有href链接，而另一列没有任何标记。

就像我上面提到的，我用来突出显示表格行的脚本工作时。但我试图稍微修改脚本，以便它只在单击“tr td”中的“a”标记时才执行单击效果。现在，表格行突出显示无论我在“tr”区域内单击的位置都无关紧要。即使我单击'tr'中没有链接的第二列，它也会突出显示。

如何修改上面的脚本，以便在点击表格行第一列中的“a”标记时突出显示整个表格行？

Answer 1

jQuery 1.7.x：

$('tr').on('click','a', function () {
    $(this).closest('tr').css({ 'background-color' : '#ccc'});
});

我认为您只需要更改TR而不是TD的背景颜色。如果我弄错了，请改用它：

$('tr').on('click','a', function () {
    $(this).closest('tr').children('td').css({ 'background-color' : '#ccc'});
});

jQuery 1.6.x及以下版本：

$('tr').delegate('a', 'click', function () {
    $(this).closest('tr').children('td').css({ 'background-color' : '#ccc' });
});

修改

根据您在下面的评论，您希望在单击另一行时将恢复为正常的背景颜色。

为了有效地做到这一点，我建议你采用CSS规则。哎呀，来想一想，即使问题首先得到回答，我们也应该这样做。

首先，像这样定义CSS规则：

tr { background-color:#fff; /* or your default */ }
tr.selected { background-color:#ddd; /* or your selected color */ }

然后使用jQuery切换它：

$('tr').delegate('a', 'click', function () {
    $(this)
        .closest('tr').addClass('selected')
        .siblings('tr').removeClass('selected')
        ;
});

如果仅修改tr对您不起作用，请修改CSS规则，如下所示：

tr td { background-color:#fff; /* or your default */ }
tr.selected td { background-color:#ddd; /* or your selected color */ }

Answer 2

您可以使用它来检查'a'是否低于带有href的'tr'

$('tr').click(function(e) {
    if (e.target.href){
        $('tr td').css({
            'background': 'none'
        });
        $('td', this).css({
            'background-color': '#CCC'
        });
    }
});

PS。感谢Richard Neil Ilagan因为事件冒泡而使用if（e.target.href.length＆gt; 0）抛出异常。

Answer 3

看看这是否适合你：

http://jsbin.com/enariy/edit#javascript,html

Javascript仅突出显示表行当单击“a”标记内部时

3 个答案:

jQuery 1.7.x：

jQuery 1.6.x及以下版本：

修改