仅在单击'a'标记内时才突出显示表行的Javascript
[英]Javascript to Highlight Table Row Only When inside 'a' tag is clicked
问题描述
I currently have a html table (with 2 columns) and I am trying to add various effects to this table such as table row hover effect, table click effect, etc...This is the script I am using now and its working fine so far: 
我目前有一个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>
From the above template, you can see that I am having 2 columns for this table and 1 columns has the tag with the href link and the other column doesnt have any tag. 从上面的模板中，您可以看到我有2列用于此表，其中1列具有带有href链接的标签，而另一列则没有任何标签。
Like I mentioned above, the script I am using to highlight the table row when clicked works. 就像我上面提到的那样，单击时我用来突出显示表格行的脚本起作用。 But I am trying to slightly modify the script so that it only execute the click effect only when the "a" tag inside the "tr td" is clicked. 但是我试图稍微修改一下脚本，以便仅在单击“ tr td”内的“ a”标签时才执行单击效果。 Right now, the table row is highlighted doesnt matter where I click inside the 'tr' area. 现在，突出显示的表格行与在“ tr”区域内单击的位置无关。 It also highlights even if I click the second column inside the 'tr' which has no link. 即使单击“ tr”内没有链接的第二列，它也会突出显示。
How can I modify this above script so it highlights the entire table row ONLY when the 'a' tag inside the table row's first column is clicked? 如何修改上面的脚本，以便仅在单击表行第一列中的“ a”标签时才突出显示整个表行？
3 个解决方案
解决方案1
0 已采纳 2012-01-13 06:48:56
jQuery 1.7.x : jQuery 1.7.x：
$('tr').on('click','a', function () {
$(this).closest('tr').css({ 'background-color' : '#ccc'});
});
I'm thinking that you only need to change the background color of the TR and not the TD . 我认为您只需要更改TR的背景颜色，而不必更改TD的背景颜色。 If I'm mistaken, just use this instead: 如果我弄错了，请改用此方法：
$('tr').on('click','a', function () {
$(this).closest('tr').children('td').css({ 'background-color' : '#ccc'});
});
jQuery 1.6.x and below : jQuery 1.6.x及以下版本：
$('tr').delegate('a', 'click', function () {
$(this).closest('tr').children('td').css({ 'background-color' : '#ccc' });
});
EDIT 编辑
As per your comment below, you want to revert a row back to a normal background color when another row is clicked. 根据下面的评论，您希望在单击另一行时将其还原为正常的背景色。
To do that efficiently, I'd suggest you resort to CSS rules. 为了有效地做到这一点，建议您使用CSS规则。 Heck, come to think of it, we should have done that even as the question was first answered. 哎呀，想一想，即使是先回答问题，我们也应该这样做。
First, define CSS rules like so: 首先，如下定义CSS规则：
tr { background-color:#fff; /* or your default */ }
tr.selected { background-color:#ddd; /* or your selected color */ }
then switch that using jQuery: 然后使用jQuery进行切换：
$('tr').delegate('a', 'click', function () {
$(this)
.closest('tr').addClass('selected')
.siblings('tr').removeClass('selected')
;
});
If just modifying the tr does not work for you, modify your CSS rules like so: 如果仅修改tr对您不起作用，请按如下所示修改CSS规则：
tr td { background-color:#fff; /* or your default */ }
tr.selected td { background-color:#ddd; /* or your selected color */ }
解决方案2
0 2012-01-13 06:53:15
you can use this to check if an 'a' is below the 'tr' with href 您可以使用它检查带有href的'tr'是否低于'tr'
$('tr').click(function(e) {
if (e.target.href){
$('tr td').css({
'background': 'none'
});
$('td', this).css({
'background-color': '#CCC'
});
}
});
PS. PS。 Thanks to Richard Neil Ilagan for the head's up on the exception thrown by using if (e.target.href.length > 0) due to event bubbling. 感谢Richard Neil Ilagan意识到由于事件冒泡而使用if（e.target.href.length> 0）引发的异常。
解决方案3
0 2012-01-13 06:56:51
See if this works for you: 看看这是否适合您：
http://jsbin.com/enariy/edit#javascript,html http://jsbin.com/enariy/edit#javascript,html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.