Discussion :

[Nick_Rivers]

Bonjour à tous,

Je vous explique mon problème je dispose d'un tableau classique j'aimerai grâce à l'action onclick récupérer les valeurs des cellules (les <td>) et les afficher dans un div ou autres.

exemple : je clique sur une ou des cellule(s) de mon tableau et le contenu de la/ les cellule(s) sélectionnée(s) est dupliqué à coté du tableau (un récapitulatif en gros des évènements cliqués)

j'ai déjà une petite fonction qui me permet d'ajouter une couleur à la cellule sélectionnée

Code :

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

1
2
3
4
 
function chgeCouleur(cel){
cel.bgColor="orange";
}

pour le reste j'imagine que je dois utiliser ".getElementById" ?

Merci de votre aide !

[SpaceFrog]

une cellule n'a de value ...
voir innerHTML

[Nick_Rivers]

Merci,

donc en m'appuyant sur innerHTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function affiche(val) 
  {
  if (document.getElementById)
    {
    document.getElementById("recap").innerHTML = val;
    }
  else if (document.all) 
    {
    document.all["recap"].innerHTML = val;
    }
  }

Code :

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

<td class="cellule_" onclick="affiche('blabla'),chgeCouleur(this)">

j'arrive bien à récupérer la valeur de la cellule sélectionnée dans un div

Code :

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

<div id="recap"></div>

Il faut maintenant, que je trouve le moyen pour garder l'ensemble des valeurs des cellules sélectionnées !

Merci

[SpaceFrog]

garder ? ou ? pour quel usage ?

[Nick_Rivers]

Bonjour,

en fait, quand on sélectionne une ou des cellule(s) je veux récupérer dans la div chaque valeur de celle-ci pour en suite les traiter et les insérer en base.

faire une liste qui récapitule les évènements sélectionnés du genre

Mercredi 13/01/10 - 13h30 - X
Mercredi 13/01/10 - 15h00 - X
Jeudi 14/01/10 - 16h00 - X

"X" étant une image ou lien pour supprimer l'évènement sélectionné

les infos récupérés seront traités par un form pour être envoyés en Bdd !

j'espère avoir bien expliqué mon cas

Merci

[SpaceFrog]

Deux possibilités, soit tu mets des inputs hidden dans ton form, masi cela suppose une creation d'input pour chaque selection...
Soit tu passes par un objet json que tu transmet sà ta page de traitement

[Nick_Rivers]

Merci, j'ai regardé du coté json je vais opter pour cette solution la.

Concernant le innerHTML pour le moment ma fonction une fois que je sélectionne une cellule je remplace bien dans la div voulue.

Ma question est de comment procéder pour que je puisse récupérer la valeur de "chaque" cellule car pour le moment chaque nouvelle cellule sélectionnée va me remplacer l'ancienne valeur par la nouvelle ce qui est logique

je pense qu'il faut que je récupère chaque id ?des <td> sélectionnés

Merci

[SpaceFrog]

encore une fois l'objet json me parait le plus indiqué

Code :

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

{idcellule: innerHMLTcellule, ....}

ça permet de bien referencer les valeurs par rapport aux cellules

[Nick_Rivers]

Oui pour ça j'ai bien compris

c'est plus au niveau de récupérer les id de la sélection multiple ou je bug !

Merci de ton aide je continu de chercher

[Nick_Rivers]

Bonjour,

je reviens après quelques jours sur mon problème et la sélection des cellules
ou je bloque toujours un peu.. du moins je complique pas mal les choses.

Le tableau est constitué de 5 colonnes (Lundi au vendredi) et 24 lignes (tranches horaires de 30minutes)

j'ai donc un total de 120 cellules qui peuvent être cliquées et dont je dois récupérer l'id de chaque sélectionnées pour les envoyer dans une bdd.

Une fois cette opération réalisée, j'ai besoin de faire l'opération inverse c'est à dire permettre la consultation de ce planning en affichant les tranches horaires sélectionnées et enregistrées précédemment.

comme dit plus haut le Json semble bien approprié mais je "patauge" ...

car en utilisant une structure avec <table> je pense que cela doit être lourd à gérer ?

Merci

[SpaceFrog]

tu peux mettre en page des inputs directement avec un nommage rationnel
cela evitera juste une operation intermédiaire de recolte des donnés ...

[Nick_Rivers]

Le problème étant qu'il faut vraiment que je puisse retrouver la structure du tableau de départ. car pour bien simplifier encore les choses..

Quand le tableau est affiché les cellules précédemment sélectionnées sont des propositions



ici 3 propositions je clique sur une zone bleu et je confirme cette tranche horaire (update statut et id de la personne dans la base.)


Je sent que je vais passer encore quelques longues heures sur le problème !

Merci

[SpaceFrog]

je ne vois pas de contre indication

d'un coté sur le serveur tu as des plages reservées
de l'autre cote htlm des td ou des inputs à colorer

faut juste faire la moulinette en php qui attribue ou non une couleur de fond et inversement une moulinette qui reserve ou non en fonction de la couleur et un js qui permette do modifier la couleur coté client

[yacine.dev]

pour retrouver la structure de tableau ,les infos sont dans la bd .donc,pour chaque case qui represente une plage horaire tu vas interoger la base de donné en fonction de la valeur date de cette cellule (c'est ce que j'ai fait et ça s'est bien marché)

[Nick_Rivers]

Bonsoir,

Concernant la sélection des cellules et la récupération des données dans un objet Json j'aimerai simplifier mon code.

Soit parcourir le tableau tester à chaque cellules sélectionnées ici la couleur récupérer la valeur avec innerHTML et construire l'objet Json.

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
var arrayLignes = document.getElementById("tab").rows;
var longueur = arrayLignes.length;
var i=0; 
 
	while(i<longueur)
	{
		if(inf.bgColor=='#67a9eb')
		{
		  //document.getElementById("inf").innerHTML = val; ...
		}
		else if (document.all)
		 {
                  //		
		 }
		 i++;
	}

ainsi j'éviterai de dupliquer certaines fonctions... ?
comment éviter d'attribuer un ID à chaque cellules ?

je me suis penché de la même manière pour créer un input à chaque détection d'une cellule sélectionnée mais les problèmes avec IE concernant l'attribut name persistent toujours. Et la solution Objet est plus pratique à gérer

Merci

[SpaceFrog]

eviter d'&attribuer un id à chaque cellule ?
heu ça risque de rendre le code plus flou et compliqué ...
tu peux le faire en passant par les names ou les tagNames
et du coup au lieu de getELemntById () par getElementsByName() ou getElementsByTagName() ... tu recupères donc un collection ordonnée mais pour faire le rapport entre la plage horaire et l'indice dans la collection je trouve nettement plus clair de rester sur un id réprésentatif ...

[Nick_Rivers]

Bonjour et merci pour les précédentes réponses

concernant les id je suis d'accords avec toi SpaceFrog

j'ai donc un peu avancé depuis ces derniers jours et partis sur une autre base car des contraintes supplémentaires s'ajoutent !

Donc aujourd'hui je génère un tableau avec des éléments du DOM

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
<script>
    function start() {
        var body = document.getElementsByTagName("body")[0];
 
        table = document.createElement("table");
	table.id = 'calendar';
        tablebody = document.createElement("tbody");
 
        for(var j = 0; j < 24; j++) {
            row = document.createElement("tr");
 
            for(var i = 0; i < 5; i++) {
 
                cell = document.createElement("td");
				cell.id = ''; // attribuer un ID automatique
				cell.className = "cellule_";	
				cell.onclick = function () { changerCouleur(this);};					
				document.body.appendChild(cell);
                row.appendChild(cell);
            }
            tablebody.appendChild(row);
        }
        table.appendChild(tablebody);
        body.appendChild(table);
 
        table.setAttribute("border", "1");
	table.className = "bord";
    }
</script>

il me faut donc trouver une solution pour générer automatiquement un id pour les cellules ?? que je puisse récupérer avec un getElementById(??) dans ma fonction (j'ai essayé pas mal de chose sans résultat vraiment convainquant )

concernant mon div qui récapitule je pense utiliser une fonction qui génère des champs une fois une cellule sélectionnée avec les infos (il s'agit la d'un coté visuel ) ce n'est pas ce module qui servira lors de la validation.
cela m'évite de créer autant de fois que de cellules une fonction avec des innerHTML

et enfin récupérer les valeurs des champs générés du récapitulatif pour créer un objet json

[ishika83]

Bonjour Nick_Rivers

Une simple question, j'aimerais savoir si c'est possible comment tu fait pour que ton code détecte plusieurs cellules sélectionnées et lire leurs contenus.
si tu peux me donner un apperçu de ta fonction, ça va m'aider.
Merci à toi

[Nick_Rivers]

@ishika83

je suis toujours en cours pour solutionner le problème quand j'ai un peu de temps !