<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>

J'aimerais:

Si je survole TR avec le paramètre aaa = "one" alors la couleur de fond pour tous les TR avec le paramètre bbb = "one" sera rouge.

Je voudrais utiliser jquery.

EXEMPLE EN DIRECT: http://jsfiddle.net/syCMN/1/

Merci pour l'aide!

1
Paul Wesgers 4 oct. 2011 à 17:57

5 réponses

Meilleure réponse
$('tr').hover(function(){
     $('tr[bbb="'+$(this).attr('aaa')+'"]').addClass('red');
},function(){
     $('tr').removeClass('red');   
})

http://jsfiddle.net/syCMN/2/

2
Andy 4 oct. 2011 à 14:00
$('#tab tr[aaa="one"]').hover(
    function(){
        $('#tab tr[bbb="one"]')           
            .css('background-color', 'red');
    },
    function(){
        $('#tab tr[bbb="one"]')           
            .css('background-color', 'white');
    }
);
1
cetver 4 oct. 2011 à 14:09

En général, c'est une mauvaise idée. Votre code ne peut passer aucune sorte de validation HTML en raison de vos attributs personnalisés. N'est-il pas plus logique d'utiliser deux classes pour décrire chacune <tr>?

1
ZolaKt 4 oct. 2011 à 14:08
<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>
1
DefyGravity 4 oct. 2011 à 14:02

Cela devrait le faire:

$(function(){
    $('tr[aaa=one]').mouseenter(function(e){
        $('tr[bbb=one]').css('background-color', 'red');
    });
});
1
swatkins 4 oct. 2011 à 14:07
7649040