Tableau javascript rempli avec des index d'un tableau array php.

**madina** · 11/08/2011, 15h32

Bonjour,

je construit un tableau javascript qui est indexé par des variables d'un autre tableau php array.
Les valeurs de ce tableau JS sont des éléments d'un formulaire . le tableau est rempli si je coche la ligne correspondante à l’élément <input> texte.

mais quand j'affiche mon tableau , j'obtiens des séparateurs comme ça :

Code :

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

,Produits PF,Produits ATQ,Produits Financiers,,Charges PF,,,,,Produits de location

Pourquoi les séparateurs s’incrémentent quand on descends par rapport aux lignes ?

Quels est le problème selon vous ?

voici le code HTML généré quand.

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="budget_css.css" />
<title>Modifier un chapitre</title>
</head>
<script type="text/javascript">
/**
* Méthode qui sera appelée sur le click du bouton
*/
function aff_param(tab_id)
{
var tab_chapitre = new Array();
for (i=0; i<tab_id.length; i++)
  {
  id_ligne=tab_id[i];
  if (document.getElementById('labox'+id_ligne).checked)
  {
val_chapitre= document.getElementById('chapitre'+id_ligne).value;
tab_chapitre[id_ligne]=val_chapitre;
}
}
 alert(tab_chapitre)
}
</script>
<body >  
<div id="formulaire">  
<form name="test" method="post" action="" >
<fieldset ><legend><b>chapitre à modifier</b></legend>
<table border="1" style="border-collapse:collapse" align="center" width="60%">
<thead>
<tr>
<th>Chapitre</th>
<th>A modifier</th>
</tr>
</thead>
<tbody>
<tr>  
<td width="10%">
<input type="text" name="chapitre[9]" id="chapitre9" size="15" value="Autres Charges" />
</td> 
<td>
<input type="checkbox" name="labox[9]" id="labox9" value="9"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[4]" id="chapitre4" size="15" value="Autres Produits " />
</td> 
<td>
<input type="checkbox" name="labox[4]" id="labox4" value="4"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[7]" id="chapitre7" size="15" value="Charges Administratives" />
</td> 
<td>
<input type="checkbox" name="labox[7]" id="labox7" value="7"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[6]" id="chapitre6" size="15" value="Charges AT" />
</td> 
<td>
<input type="checkbox" name="labox[6]" id="labox6" value="6"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[8]" id="chapitre8" size="15" value="Charges FinanciÃƒÂ¨res" />
</td> 
<td>
<input type="checkbox" name="labox[8]" id="labox8" value="8"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[5]" id="chapitre5" size="15" value="Charges PF" />
</td> 
<td>
<input type="checkbox" name="labox[5]" id="labox5" value="5"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[2]" id="chapitre2" size="15" value="Produits ATQ" />
</td> 
<td>
<input type="checkbox" name="labox[2]" id="labox2" value="2"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[10]" id="chapitre10" size="15" value="Produits de location" />
</td> 
<td>
<input type="checkbox" name="labox[10]" id="labox10" value="10"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[3]" id="chapitre3" size="15" value="Produits Financiers" />
</td> 
<td>
<input type="checkbox" name="labox[3]" id="labox3" value="3"  />
</td>
</tr>
<tr>  
<td width="10%">
<input type="text" name="chapitre[1]" id="chapitre1" size="15" value="Produits PF" />
</td> 
<td>
<input type="checkbox" name="labox[1]" id="labox1" value="1"  />
</td>
</tr>
<tr align="center">
<td colspan="3">
<input type="button" name="envoi_mod_chapt" value="Modifier les données"  onclick='			
var objJsonJS = ["9","4","7","6","8","5","2","10","3","1"]; aff_param(objJsonJS); '/>
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</div>
</body>
</html>

Merci de vos aides.

Cordialement.

**Bovino** · 11/08/2011, 17h24

Pourquoi les séparateurs s’incrémentent quand on descends par rapport aux lignes ?

Non, les séparateurs ne "s'incrémentent pas", c'est juste qu'il y a des cases vides dans ton tableau... J'imagine qu'elles correspondent aux cases non cochées.

**madina** · 11/08/2011, 18h27

Envoyé par Bovino

Non, les séparateurs ne "s'incrémentent pas", c'est juste qu'il y a des cases vides dans ton tableau... J'imagine qu'elles correspondent aux cases non cochées.

En fait j'ai bien pris le soin d'exclure les textes des cases non cochées.
avec

Code :

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

if (document.getElementById('labox'+id_ligne).checked)

donc il doit pas y avoir de vides.

Je voudrais mettre les textes des cases cochées dans une chaine de caractères et l'affecter au tableau au sortir la boucle. la chaine est initialisée '' avant la boucle.

Code :

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

1
2
3
4
5
6
7
8
9
10
for (i=0; i<tab_id.length; i++)
 {
 id_ligne=tab_id[i];
 if (document.getElementById('labox'+id_ligne).checked)
  {
 ligne=document.getElementById('labox'+id_ligne).value;
val_chapitre= document.getElementById('chapitre'+ligne).value;
chaine_tab=chaine_tab+val_chapitre+',';
}
}

Après j'affecte à la variable chaine mon tableau déclaré new Array();
mais j'ai à la fin de la chaine un caractère ",".

Comment le supprimer en javascript ?( enlever un caractère se trouvant à la fin d'une chaine)

Merci de vos aides

Cordialement.

**Bovino** · 11/08/2011, 20h41

Envoyé par madina

En fait j'ai bien pris le soin d'exclure les textes des cases non cochées.
avec

Code :

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

if (document.getElementById('labox'+id_ligne).checked)

donc il doit pas y avoir de vides.

oui... mais non

Code :

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

tab_chapitre[id_ligne]=val_chapitre;

Si par exemple, seules tes cases 1 3 et 8 sont cochées, tu rempliras le tableau aux rangs 1 3 et 8, mais les rangs 0 2 4 5 6 7 resteront vides

Essaye par exemple

Code :

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

1
2
3
var tab = [];
tab[50] = 1;
alert(tab.length + '\n' + tab);

et tu comprendras mieux.

**madina** · 12/08/2011, 11h20

Bonjour,

C'est vrai je vois bien. les cases non remplies sont vides.
Ce qui amène que les virgules se succèdent.

Maintenant, je voudrais déclarer un tableau dont la longueur est égale exactement au nombres de cases qui sont cochées.
Pour cela, je fais d'abord une boucle ou je comptes le nombre de cases qui cochées , puis je déclare et remplit le tableau dont la taille est égale à ce nombre.

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
j=0;
for (i=0; i<tab_id.length; i++)
 {
id_ligne=tab_id[i];
 if (document.getElementById('labox'+id_ligne).checked)
 {
  j=j+1;
}
}
var tab_chapitre =[j];
for (i=0; i<tab_id.length; i++)
 {
 id_ligne=tab_id[i];
if (document.getElementById('labox'+id_ligne).checked)
 {
 ligne=document.getElementById('labox'+id_ligne).value;
val_chapitre= document.getElementById('chapitre'+ligne).value;
tab_chapitre[id_ligne]=val_chapitre;
}
}
alert(tab_chapitre);

mais ça m'affiche toujours les virgules qui se succèdent ?

En fait je vais faire après une requête AJAX. Pour cela je veux envoyer le tableau de chapitres dont les cases sont cochées au lieu d'envoyer le tableau entier et faire la vérification de cases qui sont cochées dans le fichier de traitement php.

Est - il plus facile et pratique de le faire coté client avant d'envoyer ça en ajax ?

Le tableau dont tous les éléments déclarés sont remplis ne devrait pas avoir de cases vides. N'est-ce pas ?

Cordialement

**madina** · 12/08/2011, 11h32

Bonjour,

C'est les index des lignes qui sont les index de mon tableau.

C'est pourquoi même en fixant le nombre d’éléments, dans l'initialisation , les index ne sont pas successifs et ne sont pas ordonnées.
Je peux affecter pour la première fois un index égale à 9 (car c'est sa case qui est cochée le premier).

Je pense le seul moyen c'est de supprimer les éléments vides du tableau après ?

Cordialement.

**Loceka** · 12/08/2011, 11h36

Ce que voulait te faire comprendre Bovino est que les tableaux associatifs fonctionnent différement avec des clefs entières.

En gros si tu déclares le tableau associatif suivant :

Code :

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

1
2
var tab = new Array();
tab[3] = "C";

Il pourra être lu comme un tableau associatif OU comme un tableau "normal". Sa longueur sera donc de 4 éléments même si en réalité un seul élément a été défini (les tableaux associatifs n'ont normalement pas de longueur associée).

Le tableau que tu as construit est donc bon si tu le parcours comme un tableau associatif (avec un for ... in donc) et mauvais si tu le parcours normalement ou si tu laisses javascript le parcourir pour toi (avec un alert par exemple).

Pour résumer : ton code est tout à fait correct, c'est juste le alert qui n'affiche pas la réalité. Si tu utilises un for ... in pour parcourir ce tableau dans la suite du code, tu n'auras pas de problème.

Tableau javascript rempli avec des index d'un tableau array php.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager