Cellules d'un tableau saisissables

**drumtof** · 26/08/2009, 10h07

Bonjour à tous,

Je viens de créer un tableau, et je voudrais que les utilisateurs saisissent les différentes valeurs attendues dans chaque cellules.
Je pensait sur le clique de la cellule afficher en Javascript un input, à la dimension et à l'emplacement de la dite cellule, que l'utilisateur remplirais puis j'afficherais la valeur dans la cellule de mon tableau avec getElementByID.

Mais je n'y arrive pas...quelqu'un pourrais-t-il m'aider svp ?

Merci d'avance.

**andry.aime** · 26/08/2009, 10h22

Bonjour,
Je ne comprend pas bien ce que tu voulais mais.

Tu veux ajouter une ligne ligne dans un tableau en saisissant les valeurs des cellules avec des input ?
Tu peux d'inspirer de la FAQ

Tu veux éditer directement le contenue des cellules?
Le tutoriel

**drumtof** · 26/08/2009, 10h40

Merci pour ta réponse si rapide.

En fait ce que j'essai de faire sur le tableau suivant :

Code html :

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
 
<table  class="div_element_table_stat" >
					<tr>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td" colspan=2>Nb de rapport sans doublons</td>
						<td class="div_element_table_stat_td" colspan=2>Nb moyen de d&eacute;p&ocirc;t<br />V&eacute;h. r&eacute;parables</td>         
						<td class="div_element_table_stat_td" colspan=2>D&eacute;lai moyen de d&eacute;p&ocirc;t<br />V&eacute;h. non r&eacute;parables</td> 
						<td class="div_element_table_stat_td" colspan=2>Co&ucirc;t moyen HT r&eacute;parations</td>         
						<td class="div_element_table_stat_td" colspan=2>Nb d'heures</td>
						<td class="div_element_table_stat_td" colspan=2>Co&ucirc;t des pi&egrave;ces</td>
					</tr>
					<tr>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
						<td class="div_element_table_stat_td">Ann&eacute;e N</td>
						<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
						<td class="div_element_table_stat_td">Ann&eacute;e N</td>
						<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
						<td class="div_element_table_stat_td">Ann&eacute;e N</td>
						<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
						<td class="div_element_table_stat_td">Ann&eacute;e N</td>
						<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
						<td class="div_element_table_stat_td">Ann&eacute;e N</td>
						<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
						<td class="div_element_table_stat_td">Ann&eacute;e N</td>     
					</tr>     
					<tr>         
						<td class="div_element_table_stat_td">National VP</td>
						<td class="div_element_table_stat_td" onclick="test();"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>						     
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
					</tr>     
					<tr>         
						<td class="div_element_table_stat_td">National CTTE</td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>						     
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>     
					</tr> 
					<tr>         
						<td class="div_element_table_stat_td">National Autres</td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>						     
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>
						<td class="div_element_table_stat_td"></td>     
					</tr> 
				</table>

C'est de pouvoir permettre à l'utilisateur de remplir lui même toute les cellules (sauf celles des titres lol).

En espérant avoir été un peu plus clair...

**andry.aime** · 26/08/2009, 10h50

C'est de pouvoir permettre à l'utilisateur de remplir lui même toute les cellules

Tu veux que l'utilisateur remplisse directement sur le tableau?
Tu veux que l'utilisateur remplisse le tableau à l'aide d'un formulaire?

Les réponses sont dans les liens que je t'ai donné précédemment.
Adapte les à ton besoin.

**drumtof** · 26/08/2009, 11h05

Je veux qu'il remplisse la cellule directement dans le tableau comme l'exemple du tuto que tu m'a donnée mais mon tableau n'étant pas construit dynamiquement en java script comme dans l'exemple du tuto ...cela va-t-il marcher ?

Disons que j'ai du mal à voir comment adapter cet exemple....dsl pour mon niveau minable en JS

**drumtof** · 27/08/2009, 13h55

Bonjour,

J'ai donc créé mon tableau ainsi avec un input cacher pour l'init :

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
 
<div style="text-align:center;">
				<table class="div_element_table_stat" >
					<thead>
						<tr>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td" colspan=2>Nb de rapport sans doublons</td>
							<td class="div_element_table_stat_td" colspan=2>Nb moyen de d&eacute;p&ocirc;t<br />V&eacute;h. r&eacute;parables</td>         
							<td class="div_element_table_stat_td" colspan=2>D&eacute;lai moyen de d&eacute;p&ocirc;t<br />V&eacute;h. non r&eacute;parables</td> 
							<td class="div_element_table_stat_td" colspan=2>Co&ucirc;t moyen HT r&eacute;parations</td>         
							<td class="div_element_table_stat_td" colspan=2>Nb d'heures</td>
							<td class="div_element_table_stat_td" colspan=2>Co&ucirc;t des pi&egrave;ces</td>
						</tr>
						<tr>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
							<td class="div_element_table_stat_td">Ann&eacute;e N</td>
							<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
							<td class="div_element_table_stat_td">Ann&eacute;e N</td>
							<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
							<td class="div_element_table_stat_td">Ann&eacute;e N</td>
							<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
							<td class="div_element_table_stat_td">Ann&eacute;e N</td>
							<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
							<td class="div_element_table_stat_td">Ann&eacute;e N</td>
							<td class="div_element_table_stat_td">Ann&eacute;e N-1</td>         
							<td class="div_element_table_stat_td">Ann&eacute;e N</td>     
						</tr> 
					</thead>
					<tbody>					 
						<tr>         
							<td class="div_element_table_stat_td">National VP</td>
							<td id="file1" class="div_element_table_stat_td" onclick="CellEdit('file1');"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>						     
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
						</tr>     
						<tr>         
							<td class="div_element_table_stat_td">National CTTE</td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>						     
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>     
						</tr> 
						<tr>         
							<td class="div_element_table_stat_td">National Autres</td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>						     
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>
							<td class="div_element_table_stat_td"></td>     
						</tr>
					</tbody>
				</table>
				<input type="text" id="input_saisi" class="div_element_table_stat_input_saisi" style="display:none">
			</div>

Ensuite lors du click sur la première cellule (on l'étendra au autre quand cela marcheras) j'ai le code JS suivant qui rend visible l'input pour la saisie ...

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
 
function CellEdit(cellName){
	// Cellule sélectionnée	
	var cell=document.getElementById(cellName);
 
  	var inputSaisi=document.getElementById("input_saisi")  	
  	inputSaisi.style.display="block";		
  	inputSaisi.value = document.getElementById(cellName).innerHTML; 
 
  	// Paramétrage de input
  	inputSaisi.onblur = function(e,cell){
						   		if (Tools.KeyCode(e) == 13){
						      		loseFocus(e);
								}
  						   };
	inputSaisi.onkeydown = function(e){
						   		if (Tools.KeyCode(e) == 13){
						      		loseFocus(e);
								}
  						   };
 
 
  	//Positionnement de l_input sur la cellule
  	inputSaisi.style.top = cell.style.top
  	inputSaisi.style.height = cell.style.height
    inputSaisi.style.width = cell.style.width
 
    // Selection et focus sur l_input
    inputSaisi.select();
    inputSaisi.focus();	
}

Le problème c'est que je n'arrive pas à positionné l'input par dessus la cellule sélectionnée....auriez vous une idée...

**SpaceFrog** · 27/08/2009, 14h04

je me demande bien à quoi sert la recherche sur le forum ...
j'ai tapé 'cellule éditable' et j'arrive directement sur ce lien ...
http://www.developpez.net/forums/d65...leau-editable/

Cellules d'un tableau saisissables

JavaScript

Vue hybride

Discussions similaires

Partager

Partager