Conseil table html

Version imprimable

18/04/2012, 08h09
dewey01

Conseil table html

Bonjour à tous,

je lance ce petit topic pour demander quelques conseils, je suis actuellement en train de développer un outil de planification et étant novice en développement web, j'aimerai avoir quelques conseils pour prendre la bonne direction dans mon développement.

Donc tout d'abord voici à quoi ressemble ma table html qui représente le planning:
http://img15.hostingpics.net/thumbs/mini_301158plan.jpg

Je sais que ce n'est pas très jolie mais c'est fonctionnel (pour l'instant :p). Toutes les données affichées sont chargées à partir d'une base de données au chargement de la page en fonctions des dates présentes en haut à droites. Les boutons "prev" et "next" avance et recule de 2 jours. Le nombre de ligne n'est pas connu à l'avance contrairement au nombre de colonnes.

L'un des problèmes auquel je dois faire face est que je souhaiterai que les colonnes "Plan" et "Opp" soit éditables par l'utilisateur (qui sont respectivement la planification du nombre de pièces à produire et du nombre de personnes sur la machine). Sachant que les colonnes ne seront pas toujours présentes, dans le cas par exemple ou l'utilisateur remonte dans le temps pour voir la production faite. Une fois l'édition terminée, je dois savoir sur quelle ligne et quelle colonne elle a eu lieu pour pouvoir rentrer la valeur en bdd.

Le second problème auquel je dois faire face c'est qu'une fois, la modification effectué (sur la table comme en base) la valeur de la colonne stock doit changée automatiquement ! Je n'est pas à la rentrer en base car c'est un calcul automatique au chargement de la page en fonction des quantités planifiées.

Voila les 2 gros problèmes auxquels je me heurte, et je dois dire que cela me fait assez peur. Après quelques recherches sur notre ami Google, j'ai trouvé plusieurs choses intéressantes tel que :

http://www.webismymind.be/editablegrid/

http://www.developpez.net/forums/d85...script-v2-0-a/

ou tout simplement l'attribut "contenteditable" des div (mais pour celui ci, même si son utilisation semble très simple, je ne pense pas qu'il me permette de savoir sur quelle ligne/colonne la modification a eu lieu).

Quand aux 2 autres exemples précédents, je ne sais pas si j'arriverai à les adapter à mes besoins.

Voila, j'espère que vous aurez quelques pistes pour moi. Merci d'avance.

Cordialement,
Dewey.

ps: je ne travail que sous firefox, pas besoin de rendre compatible sous d'autres browser !
18/04/2012, 11h38
ouldfella

Citation:

je dois savoir sur quelle ligne et quelle colonne elle a eu lieu pour pouvoir rentrer la valeur en bdd.

il faut le savoir.
Quand t'a rempli ta table de la BDD, c'est que t'a utilisé une boucle, donc tu dois mettre un id dans ta boucle de sorte
id="opp"+&i
id="plan"+&i
pour chaque cellule

et que la variable $i sera incrémenté à chaque itération "$i++;"

à la fin tu aura chaque cellule avec un id unique, tu peux rajouter même un "name" unique pour chaque cellule.
les ID uniques tu pourra les utiliser en local avec javascript et les name uniques sur le serveur.

Citation:

Envoyé par ouldfella

il faut le savoir.
Quand t'a rempli ta table de la BDD, c'est que t'a utilisé une boucle, donc tu dois mettre un id dans ta boucle de sorte
id="opp"+&i
id="plan"+&i
pour chaque cellule

et que la variable $i sera incrémenté à chaque itération "$i++;"

à la fin tu aura chaque cellule avec un id unique, tu peux rajouter même un "name" unique pour chaque cellule.
les ID uniques tu pourra les utiliser en local avec javascript et les name uniques sur le serveur.

Tout d'abord merci d'avoir pris le temps de me lire et de répondre à mon post mais je dois avouer que je suis un peu perdu suite à ta réponse (probablement car je n'ai jamais fais de javascript mais je sais que je ne vais pas pouvoir y échapper). J'avais effectivement penser à un compteur (que j'ai mis sur chaque balise <tr>) mais je ne sais pas trop quoi en faire. Je joins le code de fabrication de ma table, cela montrera éventuellement des erreurs qui m'empeche d'arriver à mes fins !

Code:

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
 
<tbody class="scrollContent">
	<?php for ($count = 0; $count < count($final_display); $count++) { ?>
		<tr id="R<?php echo($count + 1);?>">
			<td id="machine"><?php echo $final_display[$count][0] ?></td>
			<td id="phase"><?php echo $final_display[$count][1] ?></td>
			<td id="jobNumber"><?php echo $final_display[$count][2] ?></td>
			<td id="subass"><?php echo $final_display[$count][3] ?></td>
			<td id="stock"><?php echo $final_display[$count][4] ?></td>
			<td id="NG"><?php echo $final_display[$count][5] ?></td>
			<td id="total"><?php echo $final_display[$count][6] ?></td>
			<td id="planProdF"><?php echo $final_display[$count][7] ?></td>
			<?php if ($_SESSION['dates'][0] < $_SESSION['jj'] || $_SESSION['dates'][0] == $_SESSION['jj']) { ?>
				<td id="planNG"><?php echo $final_display[$count][8] ?></td>
			<?php } else {?>
				<td id="planStock"><?php echo $final_display[$count][8] ?></td>
			<?php } ?>
			<td id="planOp"><?php echo $final_display[$count][9] ?></td>
			<td id="planHrs"><?php echo $final_display[$count][10] ?></td>
			<td id="planProdJJ"><?php echo $final_display[$count][11] ?></td>
			<?php if ($_SESSION['dates'][1] < $_SESSION['jj'] || $_SESSION['dates'][1] == $_SESSION['jj']) { ?>
				<td id="planNG"><?php echo $final_display[$count][12] ?></td>
			<?php } else {?>
				<td id="planStock"><?php echo $final_display[$count][12] ?></td>
			<?php } ?>
			<td id="planOp"><?php echo $final_display[$count][13] ?></td>
			<td id="planHrs"><?php echo $final_display[$count][14] ?></td>
			<td id="planProd"><?php echo $final_display[$count][15] ?></td>
			<?php if ($_SESSION['dates'][2] < $_SESSION['jj'] || $_SESSION['dates'][2] == $_SESSION['jj']) { ?>
				<td id="planNG"><?php echo $final_display[$count][16] ?></td>
			<?php } else {?>
				<td id="planStock"><?php echo $final_display[$count][16] ?></td>
			<?php } ?>
			<td id="planOp"><?php echo $final_display[$count][17] ?></td>
			<td id="planHrs"><?php echo $final_display[$count][18] ?></td>
			<td id="planProd"><?php echo $final_display[$count][19] ?></td>
			<?php if ($_SESSION['dates'][3] < $_SESSION['jj'] || $_SESSION['dates'][3] == $_SESSION['jj']) { ?>
				<td id="planNG"><?php echo $final_display[$count][20] ?></td>
			<?php } else {?>
				<td id="planStock"><?php echo $final_display[$count][20] ?></td>
			<?php } ?>
			<td id="planOp"><div contenteditable="true"><?php echo $final_display[$count][21] ?></div></td>
			<td id="planHrsL"><?php echo $final_display[$count][22] ?></td>
		</tr>
	<?php } ?>
</tbody>

Le compteur étant dans ce cas pour chaque ligne R1, R2, R3 etc.

Merci d'avance.

Cordialement,
Dewey.

18/04/2012, 12h57
ouldfella
il ne faut jamais mettre un même id plusieurs fois, id = identificateur, il doit être unique
dans ta boucle un même id va être présent dans plusieurs <td> de chaque ligne <tr>
Code:

1 2 3 <td id="machine"> <td id="phase"> ....
si tu a 10 lignes tu aura 10 fois <td id="machine"> par exemple.

2- il ne faut pas compliquer ton code moi a mon avis tu ne va pas manipuler les <TD> donc c pas la peine de leur mettre des id,
c'est dans la <td> elle même que tu va mettre un input pour les champs éditables et c'est ces champs qui vont avoir des id uniques.
18/04/2012, 13h07
dewey01
Citation:
Envoyé par ouldfella

il ne faut jamais mettre un même id plusieurs fois, id = identificateur, il doit être unique
dans ta boucle un même id va être présent dans plusieurs <td> de chaque ligne <tr>

Code:

1 2 3 <td id="machine"> <td id="phase"> ....

si tu a 10 lignes tu aura 10 fois <td id="machine"> par exemple.

2- il ne faut pas compliquer ton code moi a mon avis tu ne va pas manipuler les <TD> donc c pas la peine de leur mettre des id,
c'est dans la <td> elle même que tu va mettre un input pour les champs éditables et c'est ces champs qui vont avoir des id uniques.
En fait les id similaires sont pour le css, qui est différent selon chaque <td> :(
18/04/2012, 13h11
ouldfella

Citation:

En fait les id similaires sont pour le css

donc utilise des classes puisque il faut qu'ils soient redondants.
id doit être unique dans une page, c'est une règle

Bonjour,

alors je suis arrivé à quelque chose en cherchant à droite à gauche des solutions en javascript. Sur chacune de mes balises <td> je rajoute ceci :

Code:

<td contenteditable data-name="<?php echo($count);?>:21" class="planOp"><?php echo $final_display[$count][21] ?></td>

Ce qui me permet de récupérer la ligne ($count) et la colonne (21) avec ce script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <script> document.addEventListener('keydown', function (event) { var esc = event.which == 27, nl = event.which == 13, el = event.target, input = el.nodeName != 'INPUT' && el.nodeName != 'TEXTAREA', data = {}; if (input) { if (esc) { document.execCommand('undo'); el.blur(); } else if (nl) { data[el.getAttribute('data-name')] = el.innerHTML; log(JSON.stringify(data)); el.blur(); event.preventDefault(); } } }, true); function log(s) { document.getElementById('debug').innerHTML = 'value changed to: ' + s; } </script>
Mais j'ai plusieurs soucis (probablement du au fait que je n'y connaisse pas grand chose en javascript).
La touche Esc n'est pas reconnu, contrairement à la touche Enter mais surtout la touche Enter est reconnu même quand l'utilisateur n'est pas en train d'éditer la cellule de mon tableau (j'aimerai faire en sorte que les touches Enter soit écoutées uniquement quand l'utilisateur clic dans une cellule pour l'éditer).

Est-ce possible ? Ou ai-je clairement pris la mauvaise direction ?

Cordialement,
Dewey

21/04/2012, 10h13
dewey01

Bonjour,

je suis finalement arrivé à une solution mais pas en javascript. J'ai modifier ma <table> en y ajoutant des input (avec l'id correspondant à la ligne et la colone) et quand l'utilisateur submit je compare les valeurs qui on changées et j'ajoute en base puis enfin je recharge la <table> et les valeurs se mette à jour.

Je ne pense pas que ce soit le plus propre (je risque même de me faire taper sur les doigts mais bon ça fonctionne :s).

Je passe le sujet en résolu.

Merci pour l'aide.