11548 sujets

JavaScript, DOM et API Web HTML5

Tableau dynamique (lignes et colonnes)

Bonjour à tous,

Je cherche à créer un tableau dynamique en html (puis en php, mais je me baserai sur sa structure en html) pour lequel j'aurai des lignes regroupées en groupes (de lignes) et ces groupes seront regroupés en classes (groupe de groupes).
S'il n'y avait que cela, ce serait simple, mais je souhaiterai aussi gérer des colonnes à cacher ou afficher en fonction des lignes validées (ou cochées). Le tout ressemblerait à une grille avec un système d'accordéon sur les lignes et sur les colonnes.
Je clique sur une classe, donc je fais apparaître les groupes la constituant et je clique sur un groupe et je fais apparaître les lignes constituant le groupe.
Lorsque je clique sur une ou plusieurs lignes, des colonnes disparaissent.

Au début, je pensais gérer cela avec des div, puis on m'a conseillé de le faire en tableau. Je pense que je vais revenir aux div car j'ai des soucis d'affichage sous Firefox quand je réaffiche des lignes (que j'avais cachées). La ligne de trois cellules se retrouve condensée dans la première cellule à sa réapparition.

Je pense qu'en gérant cela avec des divs, je peux désafficher les divs "filles" ou les faire réapparaître.
Pour les colonnes, je dois jouer sur la class (une même classe pour une colonne).

Voici un bout de code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mon tableau dynamique</title>
</head>

<body>
<div id="tableau">
	<div id="class1">
		<span id="tclass1">1ère classe</span>
		<div id="c1group1">
			<span id="tc1group1">1er groupe (classe 1)</span>
			<div id="1">
				<span id="lligne1">ligne 1</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="2">
				<span id="lligne2">ligne 2</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="3">
				<span id="lligne3">ligne 3</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
		</div>
		<div id="c1group2">
			<span id="tc1group2">2nd groupe (classe 1)</span>
			<div id="4">
				<span id="2ligne4">ligne 4</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="5">
				<span id="2ligne5">ligne 5</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="6">
				<span id="2ligne6">ligne 6</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
		</div>
		<div id="c1group3">
			<span id="tc1group3">3ème groupe (classe 1)</span>
			<div id="7">
				<span id="3ligne7">ligne 7</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="8">
				<span id="3ligne8">ligne 8</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="9">
				<span id="3ligne9">ligne 9</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
		</div>
	</div>
	<div id="class2">
		<span id="tclass2">2nde classe</span>
		<div id="c2group1">
			<span id="tc2group1">1er groupe (classe 2)</span>
			<div id="10">
				<span id="lligne10">ligne 10</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="11">
				<span id="lligne11">ligne 11</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="12">
				<span id="lligne12">ligne 12</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
		</div>
		<div id="c2group2">
			<span id="tc2group2">2nd groupe (classe 2)</span>
			<div id="13">
				<span id="2ligne13">ligne 13</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="14">
				<span id="2ligne14">ligne 14</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
			<div id="15">
				<span id="2ligne15">ligne 15</span>
				<span class="col1"></span>
				<span class="col2"></span>
				<span class="col3"></span>
			</div>
		</div>
	</div>
</div>
</body>
</html>


Sauriez-vous comment je dois m'y prendre ? Quelles pistes ou technologies me préconisez-vous ?

Mon tableau va être assez important et devra permettre d'afficher des images à l'aide d'infos bulles. Les données seront donc pas forcément légères à charger. Faut il prendre AJAX pour charger au fur et à mesure (à la demande) les différentes lignes en injectant dans des div vides le code html récupéré par AJAX ?

Merci de vos réponses
J'ai travaillé un peu mon problème et voici l'état ou j'en suis :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mon tableau dynamique</title>
<style type="text/css">
<!--
div.row {
  clear: both;
  padding-top: 5px;
  }

div.row span.label {
  float: left;
  width: 150px;
  text-align: left;  
  }
div.row span.classe {
  float: left;
  width: 100%;
  text-align: left;
  background: #ffff00;
  }
div.row span.groupe {
  float: left;
  width: 100%;
  text-align: left;
  background: #ccc;
  }
div.row span.col1 {
  float: left;
  width: 80px;
  text-align: center;
  background: #f0f000;
  }

div.row span.col2 {
  float: left;
  width: 80px;
  text-align: center;
  background: #0ff0f0;
  }
div.row span.col3 {
  float: left;
  width: 80px;
  text-align: center;
  background: #00f00f;
  }
div.row span.col4 {
  float: left;
  width: 80px;
  text-align: center;
  background: #f0f0f0;
  }
-->
</style>
</head>
<script language="JavaScript" type="text/JavaScript">
function cache_div(elt) {
var tabDiv=document.getElementById(elt).childNodes;
for (x=0;x<tabDiv.length;x++) {
	if (tabDiv[x].nodeName=='DIV')
		if (tabDiv[x].style.display=="none") {
			tabDiv[x].style.display="block";
		} else {
			tabDiv[x].style.display="none";
		}
	}
}
</script>

<body>
<div style="width: 80%; background-color: #ffffff; border: 1px dotted #333; padding: 5px; margin: 0px auto";>
    <div class="row">
      <span class="label">&nbsp;</span>
	  <span class="col1">Col1</span>
	  <span class="col2">Col2</span>
	  <span class="col3">Col3</span>
	  <span class="col4">Col4</span>
    </div>
	<div class="row" name="class1" id="class1">
		<span class="classe" onClick="cache_div('class1');">classe1</span>
		<div class="row" name="tc1group1" id="tc1group1">
			<span class="groupe" onClick="cache_div('tc1group1');">groupe1</span>
			<div class="row" id="1">
			  <span class="label">ligne 1</span>
			  <span class="col1">x</span>
			  <span class="col2">x</span>
			  <span class="col3">x</span>
			  <span class="col4">x</span>
			</div>
			<div class="row" id="2">
			  <span class="label">ligne 2</span>
			  <span class="col1">x</span>
			  <span class="col2">x</span>
			  <span class="col3">x</span>
			  <span class="col4">x</span>
			</div>
		</div>
		<div class="row" name="tc1group2" id="tc1group2">
			<span class="groupe" onClick="cache_div('tc1group2');">groupe2</span>
			<div class="row" id="3">
			  <span class="label">ligne 3</span>
			  <span class="col1">x</span>
			  <span class="col2">x</span>
			  <span class="col3">x</span>
			  <span class="col4">x</span>
			</div>
			<div class="row" id="4">
			  <span class="label">ligne 4</span>
			  <span class="col1">x</span>
			  <span class="col2">x</span>
			  <span class="col3">x</span>
			  <span class="col4">x</span>
			</div>
		</div>
	</div>
  <div class="spacer">
  &nbsp;
  </div>

</div>


</body>
</html>


Excusez les couleurs flashies Smiley biggol . Avec cela, je peux fermer ou ouvrir les "div" filles sur clic des libellés, div qui sont organisées en tableau.

Il me reste à gérer la réception de l'action clic sur la balise "span" pour désafficher ou afficher (selon le cas) les div du même niveau (éléments frères dans l'élément parent).
Enfin, je dois gérer le désaffichage de colonnes en sélectionnant certaines lignes. Ce désaffichage correspondra au masquage des colonnes pour lesquelles aucune donnée est renseignée (mais l'info provient d'une BDD, puisque la page sera construite en php).

Que me conseillez-vous ?
En cliquant sur des checkbox avant les "ligne...", je récupère et mets dans un champ caché tous les checkbox cochées, puis je demande via AJAX de me dire quelles sont les colonnes à ne pas masquer ?
Ou dois-je stocker dans des champs cachés les colonnes à masquer pour chaque ligne et le gérer à partir de cela ?
Qu'est-ce qui vous semble le plus pratique, efficace ?
Modifié par Manu2.0 (10 Oct 2007 - 17:41)
Hello,

J'ai un peu de mal à me mettre dans ton projet, pour vraiment comprendre ce que tu souhaites faire Smiley smile

a écrit :
Il me reste à gérer la réception de l'action clic sur la balise "span" pour désafficher ou afficher (selon le cas) les div du même niveau (éléments frères dans l'élément parent).

Tu peux donner un exemple avec tes couleurs, je n'arrive pas à cerner de quelle balise span tu parles.

a écrit :
Enfin, je dois gérer le désaffichage de colonnes en sélectionnant certaines lignes. Ce désaffichage correspondra au masquage des colonnes pour lesquelles aucune donnée est renseignée (mais l'info provient d'une BDD, puisque la page sera construite en php).

Woot... idem. Tu veux dire que tu coches certaines lignes (avec un checkbox) et à chaque fois que tu coches une de ces lignes, cela va masquer, pour cette ligne, toutes les colonnes vides ?

Si c'est bien ça que tu veux et que tu te demandes comment faire, je te conseille de passer en revue tous les childNode de la ligne et de masquer ceux dont le innerHTML est vide.

P.S : Dans le cas présent, masquer une colonne (avec display:none) va faire bizarre si certaines colonnes sont masquées dans certaines lignes et pas dans d'autres, on saura plus trop à quoi ca correspondra vu que tout sera décalé, il vaudrait mieux jouer avec visibility:hidden.

Mais bon, comme je suis pas certain d'avoir bien compris ton probleme, je réponds p't'etre bien à coté de la plaque Smiley lol
Merci de t'intéresser à mon projet.

Tymlis a écrit :
Tu peux donner un exemple avec tes couleurs, je n'arrive pas à cerner de quelle balise span tu parles.


Dans mon tableau, j'aimerai "capturer" ou "voir" que l'on clique sur un span de la classe "groupe" (ou de la classe "classe", quand on clique sur l'intitulé de la ligne jaune ou la ligne grise) les éléments frères (car le span est au même niveau que les divs) se désaffichent ou s'affichent.
J'aimerai ne pas avoir à gérer et écrire de onclick sur toutes mes lignes (jaunes et grises). Il me semble que on peut récupérer des actions curseur sur des éléments..

Tymlis a écrit :
Woot... idem. Tu veux dire que tu coches certaines lignes (avec un checkbox) et à chaque fois que tu coches une de ces lignes, cela va masquer, pour cette ligne, toutes les colonnes vides ?

C'est exactement cela... Je peux récupérer l'info pour une ligne cochée quelles sont les colonnes à afficher. Je pense que regarder dans le innerHTML ne va pas m'arranger car je peux avoir 3 types d'infos dans chaque croisement de ligne et de colonne :
une "note" 2, une note "1" et pas de note
Mon problème sera aussi dans le décochage de ligne car, en admettant que je coche 3 lignes, le nombre de colonnes va se réduire, mais si je décoche une ligne, je dois réafficher les bonnes colonnes...
Soit je gère cela en mettant un champ caché (que l'on va nommer X) pour chaque ligne avec les colonnes à cacher et lorsque je coche ou décoche une ligne, je passe en revue tous ces X en fonction des checkbox cochées, j'affiche toutes les colonnes puis désaffiche les colonnes issues des X.

Pour ce qui est du "display:none", je l'utilise car sinon cela ne marche pas sur Firefox... Ca marche ainsi sur IE7 (et 6) et Firefox...

Voilà, j'espère t'avoir éclairci les points obscurs présentés précédemment.

Merci à toi (et aux autres qui vont par tarder à réagir Smiley cligne )
Manu2.0 a écrit :

J'aimerai ne pas avoir à gérer et écrire de onclick sur toutes mes lignes (jaunes et grises). Il me semble que on peut récupérer des actions curseur sur des éléments.

Ah ok, je ne comprenais pas, vu que ça fonctionnait déjà, ce que tu voulais. Ok, donc c'est que ça fasse la même chose, mais sans avoir à écrire les onclick dans le code HTML, oki doki, trés bien Smiley smile

Pour ça tu a deux méthodes, tout dépends de la taille de ton tableau.
La premiere consisterai a passer en revue les éléments de ton tableau (grace a getElementByTagName, getElementById, ou autre fonctions sur mesure qui permettent de selectionner des éléments comme en CSS avec des selecteurs) et d'attribuer les fonctions onclick directement sur ces objets.

var entetes = document.getElementBySelector("table span.groupe");
var k = entetes.length;
while (k--) {
	entetes[k].onclick = showElementsFreres;
}

Ceci est bien sur un exemple, getElementBySelector n'existe pas "de base", à toi de l'écrire ou d'en reprendre une existante.
et showElementsFreres serait une nouvelle méthode de ton élément (dans le sens où l'élément en question y serait référé sous "this").
Hmm, si le mot clé "this" t'es inconnu en javascript, il faudra que tu t'y penches un peu pour ton script de toutes façons Smiley langue

La deuxieme méthode, plus interessante pour les gros tableaux (surtout sous IE6), est d'utiliser une méthode d'event capturing sur l'ensemble de ton tableau. C'est à dire que tu ne définie qu'une unique methode onclick sur tout le tableau, et cette méthode se charge de retrouver sur quel élément tu a cliqué, pour lancer la fonction qui va bien avec (plutot que de mettre des dizaines, centaines d'évenement onclick sur tous les éléments).
Plus d'infos chez ppk : http://www.quirksmode.org/js/events_order.html

En ce qui concerne la façon de gérer les cases à afficher/masquer ou non, je te conseillerai de rajouter des class à chacune de tes cases spéciales, et de faire un getElementBySelector(".aFaireDisparaitre") pour trouver par exemple celles à masquer dans ce cas.


Voila voila, euh désolé si je ne suis pas trés clair par moment mais j'espere t'avoir donné quelques pistes interessantes Smiley smile
Modifié par Tymlis (11 Oct 2007 - 11:25)
Sujet clos
Aller à