jquery + css - survolez avec le paramètre

Question

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

javascript jquery html css

1

Paul Wesgers 4 oct. 2011 à 17:57

Answer 1

$('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

Answer 2

$('#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

Answer 3

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

Answer 4

<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

Answer 5

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

jquery + css - survolez avec le paramètre

5 réponses

Questions connexes

De nouvelles questions

javascript