5568 sujets

Sémantique web et HTML

[resolu]Imbrication de tbody au sein d'un table

Bonjour,
j'ai un gros formulaire (très gros), j'utilise donc des tables et pour cacher certaines parties en fonction de certain champs j'utilise donc des tbody.
Cependant je suis arrivé sur une "mine" :
En fonction d'un champs contenu dans un tbody (donc affiché ou masqué lui même en fonction d'un autre champ), je dois afficher ou masquer un autre bout de mon formulaire...
par exemple :

avez vous une voiture : oui , non
si oui afficher
         avez vous un système de climatisation : oui , non
         si oui afficher
              Sélectionner la marque de votre système de climatisation
         sinon masquer
         finsi
sinon masquer
finsi

Personelement j'ai testé ça :

<html>
<body>
<table>
<tbody id="tbody1">
	<tr>
		<td>tbody1</td>
	</tr>
	<tbody id="tbody2">
		<tr>
		<td>tbody2</td>
	</tr>
	</tbody>
</tbody>
</table>

</body>
<script language="Javascript">
alert(document.getElementById('tbody2').innerHTML);
document.getElementById('tbody2').style.display="none"
</script>
</html>

Et ça fonctionne : ... j'ai aussi vue sur quelques forums que l'on avait pas le droit d'imbriquer des tbody car ils ne peuvent contenir que des <tr> sweatdrop Vrai ou Faux ?. Je m'en remet donc à vous !
Modifié par Su4p (22 Feb 2011 - 18:36)
Salut,

Su4p a écrit :
on avait pas le droit d'imbriquer des tbody

C'est vrai...

Tu peux aussi nommer des balises <tr> qui seront destinées à être affichées ou cachées en fonction des champs saisis.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">//<![CDATA[
	function init(){
		var tr=document.getElementById('tr1');
		if(tr){
			alert(tr.innerHTML);
			tr.style.display='none';
		}
	}
	window.onload=function(){init();};
//]]>
</script>
</head>
<body>

<table>
	<tbody>
		<tr>
			<td>TBODY 1, TD 1</td>
		</tr>
		<tr id="tr1">
			<td>Texte tantôt affiché, tantôt caché</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>TBODY 2, TD 1</td>
		</tr>
	</tbody>
</table>

</body>
</html>
Oui ça je l'avais compris mais cela ne m'arrange pas.
Car j'ai une dizaine de tr à cacher et sur le reste de mon application j'ai appliqué un effet jquery (pour plus de fun) du coups ça va rendre bizarre et surtout dans le reste de l'application je me sert des tbody donc ça va être un petit peu incohérent (des fois je me sers de tr et des fois de tbody...). Mais bon je crois qu'il ne me reste que cette solution donc : go !
Merci pour la réponse.
Su4p a écrit :
j'ai un gros formulaire (très gros), j'utilise donc des tables

La logique m'échappe. On n'utilise pas des tableaux de mise en forme pour un formulaire juste parce que le formulaire est gros. On les utilisera plutôt (ou au contraire on leur préfèrera des éléments plus neutres et du positionnement CSS) pour des questions de... mise en page. Smiley cligne

Pour rebondir sur ce qui a été dit:
- Les TBODY multiples ou imbriqués, non.
- Tu peux utiliser des classes sur des éléments TR. Ça te donne une structure simple à manipuler en JavaScript, notamment avec jQuery ou lib équivalente.
- Et bien sûr si tu n'as pas fait ta mise en page à base de tableaux, tu peux utiliser des DIV comme conteneurs de tes parties à afficher/masquer.
Il me semble que le tableau dans le cas de formulaire imposant est plus facile à mettre en page :
si il y a énormément de champs et que les champs doivent rester alignés sur un quadrillage exemple :

(
      label 1 : champs 1    label 2 : champs 2
      label 3 : champs 3    label 4 : champs 4    label 5 : champs 5
      label 6 : champs 6
      label 7 : champs 7    label 8 : champs 8
)

Afin d'éviter les float qui risquent d'être très nombreux et plus lourd mais aussi pour conserver une compatibilité entre les navigateurs.

N'hésite pas à me corriger si ce que je dis est faux.
Modifié par Su4p (22 Feb 2011 - 16:17)
Disons que j'aurais penché pour du display:table-cell ou display:inline-block, mais quand on doit assurer le support d'IE7 ça n'est pas une option. Smiley smile

Avec float, effectivement dans cette configuration ça risque d'être un peu casse-gueule.
Sujet clos
Aller à