Show/Hide Table

Bonjour,

J'ai trois radio button et je voudrais que chaque bouton affiche un tableau différent tout en cachant les autres tableau.

<input type="radio" name="btn1" value="btn1" />
<input type="radio" name="btn1" value="btn2" />
<input type="radio" name="btn1" value="btn3" />


<table width="419" border="0" cellspacing="0" cellpadding="0" id="tbl1" style="display:none">
  <tr>
    <td>tableau 1</td>
  </tr>
</table>
<table width="419" border="0" cellspacing="0" cellpadding="0" id="tbl2" style="display:none">
  <tr>
    <td>tableau 2</td>
  </tr>
</table>
<table width="419" border="0" cellspacing="0" cellpadding="0" id="tbl3" style="display:none">
  <tr>
    <td>tableau 3</td>
  </tr>
</table>

Merci

Frédéric

avec jQuery

Change un peu ton html :

<input type="radio" name="btn1" value="tbl1" /> 
<input type="radio" name="btn1" value="tbl2" /> 
<input type="radio" name="btn1" value="tbl3" /> 

Et rajoute class="tohide" dans chaque table :

<table class="tohide" ... >...

Puis utilise le code js

$('.btn1').click(function()
{
  $('.tohide').css('display','none');
  $('#'+$("input[@name='btn1']:checked").attr('value')).css('display','block');
});

Ca devrait marcher
Modifié par icareo (23 May 2010 - 15:58)

Sinon pour faire un truc jQuery jusqu'au bout on peut remplacer

$('.btn1').click(function() 
{ 
  $('.tohide').css('display','none'); 
  $('#'+$("input[@name='btn1']:checked").attr('value')).css('display','block'); 
}); 

par

$('.tohide').hide();
$("input[name=btn1], input[name=btn2], input[name=btn3]").click(function() { 
  $('.tohide').hide(); 
  $('#'+$(this).val()).show(); 
}); 

En gros ca fait :
1) Je cache tous les tableau
2) Au clic d'un des boutons radio j'affiche le tableau qui correspond au bouton qui a été cliqué.
Modifié par kaen25 (25 May 2010 - 15:03)