<table id="tab">
<tr aaa="one" bbb="ooo"><td>xxx</td><</tr>
<tr aaa="two" bbb="one"><td>xxx</td><</tr>
<tr aaa="three" bbb="one"><td>xxx</td><</tr>
<tr aaa="four" bbb="three"><td>xxx</td><</tr>
</table>
i would like:
if i hover TR with parameter aaa="one" then background-color for all TR with parameter bbb="one" will be red.
i would like use jquery.
LIVE EXAMPLE: http://jsfiddle.net/syCMN/1/
thanks for help!
$('tr').hover(function(){
$('tr[bbb="'+$(this).attr('aaa')+'"]').addClass('red');
},function(){
$('tr').removeClass('red');
})
<head>
<script type="text\javascript">
$("#tab tr").hover(function(event){
var param = $(this).attr("aaa");
$("[bbb='"+param+"']").toggleClass("red");
},function(event){
var param = $(this).attr("aaa");
$("[bbb='"+param+"']").toggleClass("red");
});
</script>
</head>
This should do it:
$(function(){
$('tr[aaa=one]').mouseenter(function(e){
$('tr[bbb=one]').css('background-color', 'red');
});
});
Generally, this is a bad idea. Your code can't pass any kind of HTML validation because of your custom attributes. Doesn't it make more sense to use two classes to describe each <tr> ?
$('#tab tr[aaa="one"]').hover(
function(){
$('#tab tr[bbb="one"]')
.css('background-color', 'red');
},
function(){
$('#tab tr[bbb="one"]')
.css('background-color', 'white');
}
);
