Javascript:affichage ou non d'une ligne d'un tableau

Bonjour,

J'aimerais pouvoir afficher ou pas une ligne d'un tableau suivant la valeur sélectionnée dans une liste déroulante située sur une autre ligne de ce même tableau.

J'ai utilisé des méthodes JS utilisant les "display:none", "display:block" et même "display:table-cell" (suite à la lecture d'un précédent post) mais je n'arrive pas à mes fins...

La ligne est toujours affichée, quelque soit la valeur affectée à la ligne encadrée par un bloc "div id". En revanche, j'ai remarqué que si je scinde mon tableau et que le bloc "div id" contient un tableau entier avec la ligne que j'essaie de faire disparaitre, dans ce cas, les fonctions marchent bien...

Un peu de code pour être plus clair...

HTML:

<table>
<tr>
 <td class="form title">
   Sélectionnez un évènement
 </td>
 <td class="form content">
   <select id="eventType" onclick="javascript:checkBlockSouvenir();" >
    <option value="all" selected="selected">Tous les évènements</option>
    <option value="sport" >Tournoi des VI Nations</option>
   </select>
 </td>
</tr>
<div id="typeEventBlock" style="display:none">
 <tr>
  <td class="form title">
	Sélectionnez un type d'évènements
  </td>
  <td class="form content">
	<select name="eventType">
	<option value="all"  selected="selected">Tous les types d'évènements</option>
	<option value="sport" >Evènements sportifs</option>
</select>
</td>
</tr>
</div>
</table>

JS:

function viewBlock(sectionToDisplay) {
	document.getElementById(sectionToDisplay).style.display = "block";
}

function hideBlock(sectionToHide) {
	document.getElementById(sectionToHide).style.display = "none";
}

function checkBlockSouvenir() {
	if (document.getElementById('eventType').value == "all") {
		viewBlock('typeEventBlock');
	} else {
		hideBlock('typeEventBlock');
	}
}

Merci pour votre aide!

Flashball