Tableau Dynamique

**etiennegaloup** · 30/10/2005, 00h46

Bonjour,

je souhaiterais réaliser un tableau html dynamique. Je suppose que je dois me tourner vers le javascript.
J'aimerais pouvoir ajouter et supprimer des lignes à ce tableau. Il faut savoir que ce tableau est en fait un formulaire. Une ligne comporte des contrôles de saisie.

Si quelqu'un pouvait m'aider car je ne sais pas du tout comment faire.

Merci d'avance.
++

**Strab** · 30/10/2005, 00h50

Qu'entends-tu par tableau dynamique ?
Un tableau où lorsque tu cliques sur un lien ou un bouton, une ligne est ajoutée ?

**etiennegaloup** · 30/10/2005, 01h02

Oui c exactement ça, sur clique d'un bouton par exemple, une nouvelle ligne est ajoutée sans rechargement de la page.
Si je coche une case à cocher se situant devant la ligne, celle-ci est supprimée.

**vg33** · 30/10/2005, 01h20

Et à part ce changement d'affichage, que désires-tu faire ?

**etiennegaloup** · 30/10/2005, 01h23

Un contrôle sur les valeurs saisies, par exemple, parmi les données, il y aura un pourcentage, ainsi si 100% est dépassée, passé la valeur en totale en rouge.

Vois-tu autre chose d'interessant à rajouter ?

**Strab** · 30/10/2005, 01h31

En Javascript, tu peux accéder à un élément HTML par son id et modifier son contenu en modifiant l'attribut innerHTML.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
...
<tr id="ligne">
   <td>&nbsp;</td>
   <td>&nbsp;</td>
</tr>
...
<script>
function fillLigne(){
   document.getElementById("ligne").innerHTML="<td>colonne1</td><td>colonne2</td>"
}
</script>

Tu peux aussi changer la hauteur d'une ligne en modifiant l'attribut height d'une balise td, et donc la réduire à 0...

Je sais aussi qu'en modifiant les styles tu peux afficher/cacher des éléments, ou aussi en les changeant de "couche". Mais je n'ai jamais réellement testé.

**etiennegaloup** · 30/10/2005, 01h42

Ok je te remercie,

mais ensuite comme c un formulaire, il faut que j'attribue un nom unique à chaque objets du formulaires. Puis-je utiliser un tableau par exemple ?

**etiennegaloup** · 30/10/2005, 01h52

Pourrais-tu encore m'aider, stp,
car comme je m'y prends, je ne fais que modifier le contenu qu'il y a entre les deux balises. Donc il faudrait que j'utilise ce que tu m'as filé avec un compteur, c ça ?

**Strab** · 30/10/2005, 01h55

Pas à ma connaissance (pour les tableaux).
Mais comme les id peuvent contenir des chiffres, et que Javascript n'est pas typé, tu peux obtenir un comportement similaire facilement.

Tu identifie tous les éléments que tu voulais regrouper dans un tableau avec la même base, disons "el", suivi d'un numéro (qui sera l'équivalent de l'index du taleau). Ensuite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
function getEl(index){
   return document.getElementById("el"+index);
}

Tu vois l'idée ?
(D'ailleurs je ne suis pas sûr d'avoir bien compris la tienne)

**etiennegaloup** · 30/10/2005, 02h00

Non en fait, c pour identifier les champs des formulaires.

**Strab** · 30/10/2005, 02h05

Si tu ne connais pas le nombre de lignes car la page est dynamique, il suffit avec le langage côté serveur que tu utilises d'écrire la déclaration d'une variable javascript qui contient ce nombre.

Par exemple, en PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<script>
var nbLignes = <?= $nbLignes ?>;
</script>
...
<? for($i=0; $i<$nbLignes; $i++){ ?>
   <tr id="ligne<?= $i ?>">
      ...
   </tr>
<? } ?>

**Strab** · 30/10/2005, 02h08

Bon apparemment tu as édité ton dernier post entre temps...

Que veux tu faire exactement ?

**etiennegaloup** · 30/10/2005, 02h17

Oui désolé.
C parce que entre temps, je pensais avoir trouvé la solution.

Voici ce que j'ai fait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<script type='text/javascript'>
  var nbLine=0;
  function fillLigne(){
    var stringHTML;
    var newLine="";
    stringHTML="<td><INPUT name='cliId' type='text' size='9' readonly></td>";
    stringHTML=stringHTML+"<td><INPUT name='artId' type='text' size='9' readonly></td>";
    stringHTML=stringHTML+"<td><INPUT name='Qte' type='text' size='4' maxlength='4'></td>";
    stringHTML=stringHTML+"<td><INPUT name='Prc' type='text' size='4' maxlength='4'></td>";
 
    for (i=0;i<nbLine;i++){
      newLine=newLine+stringHTML;
    }
 
    document.getElementById("ligne").innerHTML=newLine;
 
    nbLine=nbLine+1;
  }
  </script>
 
[..]
<tr id='ligne'>
        </tr>
 
[..]

Donc ceci ne fonctionne pas.
Je ne sais pas trop comment je pourrais faire pour le faire marcher.

Ensuite, mon autre problème se situe pour l'identification des contrôles du formulaire côté serveur.
En effet, une fois que j'aurais validé mon formulaire, il faut que je puisse identifier inviduellement chaque contrôle de chaque ligne.

Autre problème, ce script ne fonctionne pas du tout avec IE 6.

++

**Strab** · 30/10/2005, 02h50

Ton code ne marche pas, car à chaque fois que tu appelles la fonction, tu ajoutes 4 colonnes à la ligne "ligne" et tu incrémentes nbLignes.

Je ne saurais te dire pourquoi ça ne marche pas sous IE6, je ne vois à priori rien d'incompatible.

Je ne pourrai t'aider plus tant que je ne saurai pas ce que tu cherches à faire, ou que tu me donnes précisément ce qui ne marche pas.

Et de toute façon, je commence à bailler, je vais te laisser travailler seul (ou d'autres développezeurs) jusqu'à demain...

**etiennegaloup** · 30/10/2005, 11h02

Hello,

bien dormi ?
En fait j'aimerais ajouter une ligne de 4 colonnes.

il suffit avec le langage côté serveur que tu utilises d'écrire la déclaration d'une variable javascript qui contient ce nombre

Le problème est que le nombre de ligne est inconnu lorsque la page est appelée par le client.

Peut-Etre devrai-je spécifier un nombre de lignes max.

**Strab** · 30/10/2005, 13h23

Bien dormi

Je viens seulement de comprendre comment le nombre de lignes pouvait être inconnu, tu veux dire que tu ne sais pas combien de lignes l'utilisateur va ajouter ?

Allez, je t'écris un bout de code complet à l'arrache :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<html>
<head>
<title>Tableau dynamique</title>
</head>
<body>
<script>
var lastId = nbLignesInit; //à toi de connaitre nbLignesInit, 3 dans l'exemple
function addLine(){
	lastId++;
	var ligne = "<tr id=\"ligne"+lastId+"\">"; //Début de la ligne, identifiée par son numéro
	ligne += "<td><a href=\"javascript:delLine("+lastId+")\">suppr.</a></td>"; //Lien pour la supprimer
	ligne += "<td>colonne1</td><td>colonne2</td><td>colonne3</>"; //Les 3 autres colonnes
	ligne += "</tr>";
	document.getElementById("dynTable").innerHTML += ligne; //Ajout de la ligne au tableau
}
 
function delLine(idLigne){
	var dynTableContent = document.getElementById("dynTable").innerHTML;
	var debLigne = dynTableContent.indexOf("<tr id=\"ligne"+idLigne+"\">");
	var finLigne = dynTableContent.indexOf("</tr>", debLigne) + 4; //+4 : Il faut l'index de la fin de </tr>
	dynTableContent = dynTableContent.substring(0, debLigne) + dynTableContent.substring(finLigne+1, dynTableContent.length);
	document.getElementById("dynTable").innerHTML = dynTableContent;
}
</script>
 
<table border="1" id="dynTable">
	<tr id="ligne1">
		<td><a href="javascript:delLine(1)">suppr.</a></td>
		<td>colonne1</td><td>colonne2</td><td>colonne3</>	
	</tr>
	<tr id="ligne2">
		<td><a href="javascript:delLine(2)">suppr.</a></td>
		<td>colonne1</td><td>colonne2</td><td>colonne3</>	
	</tr>
	<tr id="ligne3">
		<td><a href="javascript:delLine(3)">suppr.</a></td>
		<td>colonne1</td><td>colonne2</td><td>colonne3</>	
	</tr>
</table>
<input type="button" value="Ajouter" onclick="javascript:addLine()" />
</body>
</html>

Testé sous Firefox

**etiennegaloup** · 30/10/2005, 13h39

Ok je te remercie bien pour ce code.

Je vais le tenter tout de suite, mais je pense que ça va bien marcher.
Par contre, comme je le dis dans un autre post, avec IE, ça ne fonctionne pas, ça vient de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("dynTable").innerHTML

Apparemment, IE n'aime pas trop cette méthode.

++

**zetta** · 15/11/2005, 12h05

j'ai testé le code qui marche super bien sur firefoks

. Mais quand j'affiche le code source, je ne vois pas les lignes ajoutées entre les balises <body>...</body>

Par contre ça marche pas sous IE.

:

Tableau Dynamique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager