11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher/Masquer un <tr></tr>

Bonjour,

après avoir effectué quelques recherches sur le net ainsi que sur ce forum je ne parviens pas à afficher/masquer une partie d'un tableau avec javascript.

Voici mon code :


<table id="tab" cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td colspan="3"><b>Matériel</b></td>
		</tr>
		<tr id="catTab" height="30">
			<td width="150" valign="bottom">Type</td><td width="80" valign="bottom" >Réserve</td><td width="80" valign="bottom" >Utilisés</td>
		</tr>
		<tr height="20">
		</tr>
		<tr>
			<td colspan="3" class="matTab"><a onClick="...........">Test</a></td>
		</tr>
		<tr>
			<td>1</td><td>10</td><td>5</td>
		</tr>
		<tr>
			<td>2</td><td>5</td><td>0</td>
		</tr>
		<tr>
			<td>3</td><td>20</td><td>15</td>
		</tr>	
</table>



Je voudrais que lorsque j'arrive sur ma page, seul le lien "Test" soit affiché. Puis en cliquant dessus, le contenu de la section "Test" s'affiche.
J'ai tenté plusieurs solution avec document.getElementById(element).style.visibility ou encore document.getElementById(element).style.display mais rien ne marche convenablement...

Pourriez-vous m'écrire l'ensemble d'une fonction javascript capable de gérer mon problème ?

Merci d'avance !
Modifié par Api1000 (26 May 2007 - 17:37)
OK je vais voir avec ça mais comment fais-je pour qu'en arrivant sur la page les sections soient cachées... Une fonction en body onLoad ?
Relativement à ma technique il n'y a pas besoin de grand-chose.

Tes TR sont définis avec un height à 0 et donc leur contenu est invisible quand ta page se charge.
Puis tu as un JS sur onmouseover ou onclick qui lui attribue un height cohérent.
Puis un autre JS sur onmouseout qui le remet à 0.

Va voir ici http://www.essarts-le-roi-tt.fr/Pages/Classements.html
Si c'est quelque chose dans le genre que tu cherches.

C'est en onclick sur la barre-image FFTT et en onclick encore sur les rangs des cadets minimes...
Voilà c'est bon tout marche bien !
Voici le code si ça peut aider quelqu'un :


<table id="tab" cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td colspan="3"><b>Matériel</b></td>
		</tr>
		<tr id="catTab" height="30">
			<td width="150" valign="bottom">Type</td><td width="80" valign="bottom" >Réserve</td><td width="80" valign="bottom" >Utilisés</td>
		</tr>
		<tr height="20">
		</tr>
		<tr>
			<td colspan="3" class="matTab"><img src="icones/up.gif" width="16" height="12" border="0" alt="afficher" onClick="javascript:aff(1); return false;" /> <img src="icones/down.gif" width="16" height="12" border="0" alt="masquer" onClick="javascript:cach(1); return false;" />Pots </td>
		</tr>
		<tr id="tr1">
			<td>...</td><td>...</td><td>...</td>
		</tr>
		<tr id="tr2">
			<td>...</td><td>...</td><td>...</td>
		</tr>
		<tr id="tr3">
			<td>...</td><td>...</td><td>...</td>
		</tr>
</table>




Et le javascript :

function aff (element)

{
for (i=element; i<=element+3; i++) {
tr = document.getElementById("tr" + i);
tr.style.display = "";
}

}

function cach (element)

{
for (i=element; i<=element+3; i++) {
tr = document.getElementById("tr" + i);
tr.style.display = "none";
}

}[code]


Dans mon cas, il y a toujours le même nombre de rangées dans chaque section du tableau d'où le for (i=element; i<=element+3; i++) { } Smiley ravi
A adapter si votre nombre de rangées peuvent varier Smiley cligne

Merci à toi aCOSwt pour ton aide précieuse !
Sujet clos
Aller à