Manipulation de tableau <table> <tr> <td>

Bonjour à tous,

Je souhaite afficher/masque des colonnes suivant l'option choisi dans une liste déroulante.

voici mon code html :

	<FORM>
		<SELECT id="listeEcole" name="nom" size="1">
			<option value="tout">Voir tout
			<option value="enfants">Enfants
			<option value="parents">Parents
			<option value="tuteur">Tuteur
			<option value="professeur">Professeur
		</SELECT>
		<INPUT type="submit" value="Test" id="btnsubmit"> 			
	</FORM>
	<TABLE id="tableType">
		<tr>
			<td class="dom"></td>
			<th class="dom">permissions des enfants</th>
			<th class="dom">permissions des parents</th>
			<th class="dom">permissions des tuteur</th>
			<th class="dom">permissions des professeur</th>
		</tr>
		<tr>
			<th class="dom">stage 1</th>
			<td class="dom">test</td>
			<td class="dom">test</td>
			<td class="dom">test</td>
			<td class="dom">test</td>
		</tr>
		<tr>
			<th class="dom">stage 2</th>
			<td class="dom">test</td>
			<td class="dom">test</td>
			<td class="dom">test</td>
			<td class="dom">test</td>
		</tr>
		<tr>
			<th class="dom">stage 3</th>
			<td class="dom">test</td>
			<td class="dom">test</td>
			<td class="dom">test</td>
			<td class="dom">test</td>
		</tr>
		<tr>
			<th class="dom">stage 4</th>
			<td class="dom">test</td>
			<td class="dom">test</td>
			<td class="dom">test</td>
			<td class="dom">test</td>
		</tr>
	</TABLE>

Je dois en théorie récupérer la valeur de la liste déroulante pour ensuite la comparer au td de la première ligne tr. Ensuite récupérer l'indice de cette colonne pour masquer la case dans chaque lignes tr.

Ce n'est pas très clair et évident mais c'est pourtant ça

Si quelqu'un a une idée je la remercie d'avance beaucoup
Modifié par PetarouxRay (06 Jun 2012 - 14:12)

Il va te falloir placer un écouteur "change" sur ton selecteur (ou "submit" sur le formulaire si tu veux utiliser ton bouton submit). Quand l'écouteur reçoit l'évènement tu récupère la valeur du select puis tu la compare à la chaine contenue dans chaque ligne de la première colonne de ton tableau.
Comme le texte de ta colonne ne correspondent pas parfaitement aux valeurs de ton select il faudra probablement passer par une expression régulièr pour la comparaison.

Salut,

Pour te faciliter la vie, commence par séparer l'entête de ta table du corps:

<table>
  <thead>
    <!-- Ici les entêtes (noms de colonnes) -->
  </thead>
  <tbody>
    <!-- Ici le corps (stage1, stage 2, etc...) -->
  </tbody>
</table

Ensuite, il te suffi de faire comme te l'a indiqué moust, en utilisant un événement sur ton select. Je te donne vaguement la procédure a suivre et ensuite je te laisse rechercher la solution compléte:

- Identifier tes <td> avec un attribut "name" qui a pour valeur le value de ton select (par exemple, toute la colonne 2 aura name="enfants")

- Dans ta fonction JS (celle appelé pas le onchange du select), tu retrouve tes td avec un document.getElementsByName, qui prendra comme paramètre la valeur du select (this.value dans l'evenement)

- une fois la liste récupéré, tu fait une boucle, tu passe les td en display none, (monTd.style.display = 'none')

et voila.

Je te donne pas volontairement de code tout fait, pour que tu assimile bien le fonctionnement.

N'oublie pas de remettre les td précédement masqués en display: table-cell quand tu change ton select

for(i=0;i<oTR.length;i++){
	oTD = oTR[ i ].getElementsByTagName('td');
	oTD[v-1].style.visibility = "hidden";
}

Pas plutôt quelque chose du type

for(i=0;i<oTR.length;i++){
	oTD = oTR[ i ].getElementsByTagName('td');
	for (var j = 0; j < oTD.length; j++)
		oTD[j].style.visibility = (j == v - 1 ? "visible" : "hidden");
}

Encore que, avec la propriété

visibility : hidden

les éléments prennent toujours de la place sur la page...

Edit : Au temps pour moi, ton code était pour masquer la colonne choisie (encore, qu'après, elle restait cachée avec ton code...) alors que le mien l'affiche.
Modifié par Gothor (06 Jun 2012 - 11:57)

@JJK801 : tu as vérifié ? (EDIT : tu sembles avoir corrigé depuis)

@Gothor : OK, j'avais uniquement considéré l'aspect 'masquer'

On peut bien sûr remplacer visibility par display pour gommer l'espace ...
Modifié par lddsoft (06 Jun 2012 - 12:09)

lddsoft a écrit :
@JJK801 : tu as vérifié ?

Non mais sur ce coup, je suis assez sur de moi

@Gothor :

Gothor a écrit :
Re-edit : Arrêtez d'éditer vos messages ! Plus rien n'a de sens après xD

Tout à fait d'accord !!

Pour maintenant, autant donner la solution, histoire que ce brave garçon ait un code fonctionnel

<script type="text/javascript">

function masquer(cellsName){
	var tds = document.getElementsByName(cellsName);
	
	for(var i = 0; i < tds.length; i++)
	{
		var tr_children = tds[i].parentNode.children;
		var nb_children = tr_children.length;
		
		for(var j = 1; j < nb_children; j++)
		{
			tr_children[j].style.display = "none";
		}
		
		tds[i].style.display = "table-cell";
	}
}

</script>

<style type="text/css">
td{text-align:center;border:1px dotted gray}
th{font-weight:bold;background:#eaeaea;border:none}
</style>

</head>
<body>
	<form action="#">
		<select id="listeEcole" name="nom" size="1" onchange="masquer(this.value);">
			<option value="enfants">enfants</option>
			<option value="parents">parents</option>
			<option value="tuteurs">tuteurs</option>
			<option value="professeurs">professeurs</option>
		</select>
		<input type="submit" value="Test" id="btnsubmit">
	</form>
	<table id="tableType">
		<tr>
			<th>&nbsp;</th>
			<td name="enfants"><b>permissions des enfants</b></td>
			<td name="parents"><b>permissions des parents</b></td>
			<td name="tuteurs"><b>permissions des tuteurs</b></td>
			<td name="professeurs"><b>permissions des professeurs</b></td>
		</tr>
		<?php
		for($i = 1; $i <= 5; $i++)
		{
		?>
		<tr>
			<th>stage <?php echo $i; ?></th>
			<td name="enfants">test</td>
			<td name="parents">test</td>
			<td name="tuteurs">test</td>
			<td name="professeurs">test</td>
		</tr>
		<?php
		}
		?>
	</table>

La boucle PHP c'est juste pour la flemme xD[/i][/i]
Modifié par JJK801 (06 Jun 2012 - 12:34)

Merci pour votre réponse animé

Je vais utiliser le code a gothor pour la recherche de mot dans une expression avec search et je vous donne le code complet.

J'avais oublié de préciser que je ne peux pas/doit pas changer le code html (qui est un peu plus compliqué en vrai).
je post dans l’après midi

JE REMERCIE CEUX QUI M'ONT BIEN FAIT AVANCER SUR LE SUJET. Thank you all

Bien, voici le code html et le jquery pour afficher/masquer des colonnes de tableau en fonction de l'option choisi dans une liste déroulante.
J'ai était plus loin dans mon raisonnement en masquant aussi des lignes :

encore une fois le code html n'est pas modifiable chez moi (a vous d'adapter)

HTML : (attention entre les td et les th)

<!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" />
	<meta name="keywords" content="test" />
	<meta name="description" content="test afficher masque les tr et td d'un tableau en jquery" />
	<title>test jquery sur table</title>	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="./js/test.js"></script>	
	<link rel="stylesheet" type="text/css" href="./styleTest.css" media="all" />	
</head>

<body>
	<div id="global">
		<br>
		<FORM>
			<SELECT id="listeEcole" name="nom" size="1">
				<OPTION value="0">voir tout
				<OPTION value="1">genie
				<OPTION value="2">cesat
				<OPTION value="3">ENSOA
				<OPTION value="4">cndbc
			</SELECT>
			<input type="submit" value="Test" id="btnsubmit"> 			
		</FORM>
		<br>
		<table id="tableType">
			<tr>
				<td class="dom"></td>
				<th class="dom">l'ecole du genie</th>
				<th class="dom">l'ecole du cesat</th>
				<th class="dom">l'ecole du ENSOA</th>
				<th class="dom">cndbc</th>
			</tr>
			<tr>
				<th class="dom">ecole genie</th>
				<td class="dom color">test</td>
				<td class="dom">test</td>
				<td class="dom">test</td>
				<td class="dom">test</td>
			</tr>
			<tr>
				<th class="dom">ecole cesat</th>
				<td class="dom">test</td>
				<td class="dom color">test</td>
				<td class="dom">test</td>
				<td class="dom">test</td>
			</tr>
			<tr>
				<th class="dom">ecole ENSOA</th>
				<td class="dom">test</td>
				<td class="dom">test</td>
				<td class="dom color">test</td>
				<td class="dom">test</td>
			</tr>
			<tr>
				<th class="dom">ecole cndbc</th>
				<td class="dom">test</td>
				<td class="dom">test</td>
				<td class="dom">test</td>
				<td class="dom color">test</td>
			</tr>
		<table>
	</div>
</body>
</html>

et voici le jquery :

	$(document).ready( function() {
		/* lorsqu'on appuie sur le bouton TEST */
		$('#btnsubmit').click( function(){
			event.preventDefault();
			
			/* récupération de l'option selectionner */
			var mavar = $('#listeEcole option:selected').attr('value');
			var optiontxt = $('#listeEcole option:selected').text().trim();
			
			/* affichage de la ligne correspondante */
			$('#tableType tr:not(:first)').hide();
			$('#tableType tr:eq('+mavar+')').show();
			
			/* affichage de la colonne correspondante */
			$('#tableType tr:first-child th').each( function(i) {	
				$(this).hide();							
				
				var pos = $(this).text().search(optiontxt);
				if (pos >= 0) {		
					$(this).show();
					var eqtd = $(this).index();
					eqtd--;
					$('#tableType tr:eq('+mavar+') td').hide();
					$('#tableType tr:eq('+mavar+') td:eq('+eqtd+')').show();
				}	
			});
			
			/* Tout afficher quand on choisit l'option "voir tout" */
			if(mavar == '0') {
				$('#tableType tr').show();
				$('#tableType td').show();
				$('#tableType th').show();
			}
		});
	});

C'est mon code de novice en jquery hein il est surement grandement améliorable.



le css pour ceux qui veulent :

#global {
	position:relative;
	margin:0 auto;
	width:900px;
}

table {
	border : 1px solid #666;
	width:900px;
}
table tr{
	border : 1px solid #666;
	height : 80px;
}
table td, table th{
	border : 1px solid #666;
	width  : 20%;
}

.color {
	background-color:#aeadac;
}

Modifié par PetarouxRay (06 Jun 2012 - 14:23)