Onclick et affichage conditionnel de <tr> [Résolu]

Bonjour à tous,

Je cherche une solution pour appeler une et une seule balise <tr> sur les 3 qui composent mon tableau html.

En d'autres termes, et sur la base de la capture d'écran jointe, je souhaite que les prix soient indiqués en EUR par défaut, puis qu'ils apparaissent à la même place en CHF ou en USD selon la devise choisie.

En l'état, j'arrive à afficher/enlever chaque ligne de devise, mais pas à en imposer une seule (si USD, alors pas EUR ni CHF, bref vous avez compris).

Voici mes codes :

<script> 
function visibilite(thingId) 
{ 
var targetElement; 
targetElement = document.getElementById(thingId) ; 
if(targetElement.style.display == "none") 
{ 
targetElement.style.display = "" ; 
} else { 
targetElement.style.display = "none" ; 
} 
} 
</script> 

Et :

<table>
<tr>
<td>2 pers.</td>
<td>3 pers.</td>
<td>4 pers.</td>
<td>5 pers.</td>
<td>6 pers.</td>
</tr>
<tr id="EUR" style="display:">
<td>1860 EUR</td>
<td>1690 EUR</td>
<td>1460 EUR</td>
<td>1300 EUR</td>
<td>1150 EUR</td>
</tr>
<tr id="CHF" style="display:none;">
<td>2175 CHF</td>
<td>1985 CHF</td>
<td>1690 CHF</td>
<td>1515 CHF</td>
<td>1325 CHF</td>
</tr>
<tr id="USD" style="display:none;">
<td>2300 USD</td>
<td>2100 USD</td>
<td>1800 USD</td>
<td>1600 USD</td>
<td>1400 USD</td>
</tr>
</table>

Et enfin :

<a href="" onclick="javascript:visibilite('EUR');return false;" style="color:#e30040">EUR</a> <a href="" onclick="javascript:visibilite('CHF');return false;" style="color:#e30040">CHF</a> <a href="" onclick="javascript:visibilite('USD');return false;" style="color:#e30040">USD</a>

Merci pour votre aide
Modifié par Tokae (28 May 2013 - 11:51)

function visibilite(thingId) 
{
var targetElement; 
  document.getElementById('EUR').style.display = 'none' ;
  document.getElementById('CHF').style.display = 'none' ;
  document.getElementById('USD').style.display = 'none' ; 
  document.getElementById(thingId).style.display = 'table-row' ; 
}

Ou avec une boucle pour être plus générique.

salut,
pour commencer, je pense que ton code n'est pas le meilleur possible. D'abord tu utilises du CSS dans les attributs style, ce qui n'est pas top top mais il y a aussi des erreurs notamment pour l'attribut href vide et la valeur inexistante pour la propriété display (qui au passage devrait prendre "table-row" dans ce cas).
Je pense qu'il y a moyen de faire plus simple, je te propose ça qu'il faudra cependant adapté pour IE7.

<div>
	<p>Spécifiez votre devise : </p>
	<ul>
		<li><a href="javascript:devise('EUR')">EUR</a></li>
		<li><a href="javascript:devise('CHF')">CHF</a></li>
		<li><a href="javascript:devise('USD')">USD</a></li>
	</ul>
</div>
<table>
	<tr>
		<td>2 pers.</td>
		<td>3 pers.</td>
		<td>4 pers.</td>
		<td>5 pers.</td>
		<td>6 pers.</td>
	</tr>
	<tr id="EUR" class="devise show">
		<td>1860 EUR</td>
		<td>1690 EUR</td>
		<td>1460 EUR</td>
		<td>1300 EUR</td>
		<td>1150 EUR</td>
	</tr>
	<tr id="CHF" class="devise">
		<td>2175 CHF</td>
		<td>1985 CHF</td>
		<td>1690 CHF</td>
		<td>1515 CHF</td>
		<td>1325 CHF</td>
	</tr>
	<tr id="USD" class="devise">
		<td>2300 USD</td>
		<td>2100 USD</td>
		<td>1800 USD</td>
		<td>1600 USD</td>
		<td>1400 USD</td>
	</tr>
</table>

body {width:500px;margin:auto;}
div {padding:5px;border:1px solid;}
p, ul, li {display:inline-block;vertical-align:top;margin:0;padding:0;}
li {list-style:none;}
li+li:before {content:" / ";}
a {text-decoration:none;color:#c00;}
a:hover {text-decoration:underline;}
table {width:100%;}
td {text-align:center;border:1px solid;}
.devise {display:none;}
tr.show {display:table-row}

function devise(arg) {
	var target = document.getElementById(arg),
		devises = document.querySelectorAll(".devise");

	for(var i=0, l=devises.length; i<l; i++){
		devises[i].className = (devises[i].id == arg) ? "devise show" : "devise";
	}
}

[/i][/i]

Merci Zelalsan, merci Kustolovic, je vais chercher dans ces directions.