Javascript仅在单击“a”标记内部时高亮显示表行_Javascript_Jquery_Html Table_Row

Javascript仅在单击“a”标记内部时高亮显示表行

javascript jquery

Javascript仅在单击“a”标记内部时高亮显示表行,javascript,jquery,html-table,row,Javascript,Jquery,Html Table,Row,我目前有一个包含2列的html表格，我正在尝试向该表格添加各种效果，如表格行悬停效果、表格单击效果等。这是我现在使用的脚本，目前为止它工作正常： <head> <script type="text/javascript"> $(document).ready(function(){ //the following script is to change the table row bg color when clicked $('tr').cli

我目前有一个包含2列的html表格，我正在尝试向该表格添加各种效果，如表格行悬停效果、表格单击效果等。这是我现在使用的脚本，目前为止它工作正常：

<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标记被单击时才执行click效果。现在，表格行高亮显示与我在“tr”区域内单击的位置无关。即使我单击“tr”中没有链接的第二列，它也会高亮显示

如何修改上述脚本，使其仅在单击表行第一列中的“a”标记时高亮显示整个表行？

jQuery 1.7.x：我认为您只需要更改TR的背景色，而不需要更改TD。如果我错了，就用这个来代替：

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

jQuery 1.6.x及以下版本：编辑根据下面的评论，您希望在单击另一行时将该行还原为正常背景色

为了有效地做到这一点，我建议您使用CSS规则。见鬼，想想看，我们应该在问题第一次被回答的时候就这么做

首先，定义CSS规则，如下所示：

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

tr td { background-color:#fff; /* or your default */ }
tr.selected td { 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 { background-color:#fff; /* or your default */ }
tr.selected { background-color:#ddd; /* or your selected color */ }

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

您可以使用href检查“a”是否低于“tr”

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

另外，感谢Richard Neil Ilagan提醒您注意使用if e.target.href.length>0引发的异常，因为事件冒泡。

看看这是否适用于您：

您好，mhps，我尝试了您在链接中给出的代码，但是当我使用此代码单击表格行时，它不会将其高亮显示为CCC颜色。您好，richard，我更改TDs的背景颜色而不是TR的原因是因为我认为TR的背景颜色不能直接更改。所以我在某个地方读到，要实现这一点，最好的方法是改变tr的颜色。不确定这是否正确。另外，我尝试了您建议的代码，因为它没有突出显示tr行到CCC颜色。甚至我在同一页上使用的tr hover颜色也会停止工作。我上面的代码假设.on函数使用jQuery 1.7及以上版本。让我更新一下，以防你使用的是较低的版本。谢谢你，richard…是的，你上次更新的版本对我有用，因为我使用了jquery 1.6.2。非常感谢您的帮助…只需要对这段代码进行一个小小的修改就可以了。目前，此脚本不会撤消单击新行时高亮显示的上一行。它继续高亮显示单击的行。如何修改它，使其一次只高亮显示一行？谢谢xepterx。我试过这个代码，但它的工作方式和以前一样。这意味着，即使单击没有链接的td列，该行也会高亮显示。在该表行中，1列有链接，第2列只有简单文本，没有链接。也许您的脚本正在拾取我在第一列中的链接，并且即使在单击第二列时仍高亮显示该行。但是我试图找到一种方法，如果单击第二列，什么也不会发生，但是如果单击了带有链接的第一列，它会高亮显示该行。有意义吗？啊，我以为你想突出显示有锚的行。嗯，我已经更新了代码，所以这应该是您正在寻找的。我想知道是否最好检查$this。改为“[href]”。嗯。我想如果我点击了没有href属性的东西，你的代码会抛出一个异常。不，代码不会引发异常，因为单击没有href属性的内容不会触发事件是的，因为您正在将处理程序附加到tr上。tr内的任何内容都会由于事件冒泡而触发事件。