Discussion :

[etiennegaloup]

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]

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

[etiennegaloup]

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]

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

[etiennegaloup]

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]

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]

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]

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]

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]

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

[Strab]

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]

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

Que veux tu faire exactement ?

[etiennegaloup]

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]

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]

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]

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]

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]

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. :