Gestionnaire de contacts

Pour cet exercice, on va écrire un script JQuery qui va permettre de faire ressortir les prénom masculin et féminin d'un tableau contenant une liste de contact. L'exercice se compose de :

1. un bouton radio "trouver les hommes"
2. un bouton radio "trouver les femmes"
3. un tableau contenant une liste de contact par ville

Le but étant de faire changer la couleur de fond des cellules du tableau lorsque l'utilisateur change de sélection via les boutons radio.

Code HTML :

Quels types de prénoms souhaitez vous afficher ?
<br />
<input type="radio" name="genre" value="f" />Femmes
<br />
<input type="radio" name="genre" value="m" />Hommes
<br />
<table border=1>
  <tr>
    <th>Villes</th>
    <th>Contact n°1</th>
    <th>Contact n°2</th>
    <th>Contact n°3</th>
  </tr>
  <tr>
    <th>Toulouse</th>
    <td class="f">Aurélie</td>
    <td class="m">Jean</td>
    <td class="m">Pierre</td>
  </tr>
  <tr>
    <th>Paris</th>
    <td class="m">Quentin</td>
    <td class="m">Fred</td>
    <td class="f">Caroline</td>
  </tr>
  <tr>
    <th>Bordeaux</th>
    <td class="f">Virginie</td>
    <td class="f">Anaïs</td>
    <td class="f">Nathalie</td>
  </tr>
  <tr>
    <th>Marseille</th>
    <td class="f">Laura</td>
    <td class="m">Nicolas</td>
    <td class="f">Natacha</td>
  </tr>
  <tr>
    <th>Nantes</th>
    <td class="f">Aurélie</td>
    <td class="m">Jean</td>
    <td class="m">Pierre</td>
  </tr>
</table>

Résultat attendu :