Obtenir la valeur d'une cellule d'un tableau sur un clic

Résolu/Fermé
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020 - 26 janv. 2017 à 17:13
Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 - 27 janv. 2017 à 10:09
Bonjour,
j'ai une tableau qui représente un calendrier. Il fonctionne mais je voudrais récupérer la valeur de la cellule sur un clic

'use strict';
function afficher_cal(){

var existingTable = document.querySelector('table');
if (existingTable) existingTable.parentElement.removeChild(existingTable);

var ladate = new Date();
var ladatedujour = ladate.getDate();// la date du jour
var lemois = ladate.getMonth() + 1;
var i, c;
var row, td, th, cell;
var table = document.createElement('table');
//
// création des têtes de colonnes
var thead = table.createTHead();
row = thead.insertRow();
var nomsJours = [ 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di' ];
for (i = 0; i < 7; i++) {
td = document.createElement('td'); // malheureusement, il n’y a pas de méthode insert pour les th
td.textContent = nomsJours[i];
td.scope = 'col'; // optionnel, pour l’accessibilité
row.appendChild(td);
}
//
// création du contenu
var firstD = parseInt(document.gen.premierjourmois.value); //le jour de la semaine lundi=1, mardi=2,... dimanche=0
var lastD = parseInt(document.gen.nbjjs.value); // donne le nombre de jours (et le dernier) jour du mois
lastD = lastD + 1;
var actualMonth = parseInt(document.gen.mois_encours.value); //
c = 1;
var tbody = table.createTBody();
// la première ligne du tableau
row = tbody.insertRow();
if (firstD === 0){ // premier jour du mois un dimanche
for (i = 1; i < 7; i++) {
cell = row.insertCell();
cell.textContent = '';
cell.classList.add('couleurvide');
}
cell = row.insertCell();
cell.textContent = c;
cell.classList.add('curseur');
if ((c === ladatedujour) && (actualMonth === lemois)){
cell.classList.add('ladatedujour');
}
c += 1;
}
else if (firstD === 1){ // premier jour du mois un lundi
for (i = firstD; i < 8; i++) {
cell = row.insertCell();
cell.textContent = c;
cell.classList.add('curseur');
if ((c === ladatedujour) && (actualMonth === lemois)){
cell.classList.add('ladatedujour');
}
c += 1;
}
}
else { // les autres jours de la semaine
for (i = 1; i < firstD; i++) {
cell = row.insertCell();
cell.textContent = '';
cell.classList.add('couleurvide');
}
for (i = firstD; i < 8; i++) {
cell = row.insertCell();
cell.textContent = c;
cell.classList.add('curseur');
if ((c === ladatedujour) && (actualMonth === lemois)){
cell.classList.add('ladatedujour');
}
c += 1;
}
}
// les autres lignes du tableau
for (c = c; c < lastD; c){
row = tbody.insertRow();
for (i = 1; i < 8; i++){
if ( c < lastD){
cell = row.insertCell();
cell.textContent = c;
cell.classList.add('curseur');
if ((c === ladatedujour) && (actualMonth === lemois)){
cell.classList.add('ladatedujour');
}
c += 1;
}
if ((i < 7) && (c === lastD)){
cell = row.insertCell();
cell.textContent = '';
cell.classList.add('couleurvide');
}
}
}
document.body.appendChild(table);
}


j'ai cherché la solution un peu partout mais je ne trouve pas la solution !!
Merci d'avance

A voir également:

1 réponse

Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 550
Modifié par Nexii le 26/01/2017 à 17:25
Bonjour,

Lorsque tu crée ton élément, rajoute lui un ID afin de le matcher par un event JavaScript.

Exemple, lors de la création de l'élément table :
var table = document.createElement('table'); 
table.id = "monID";


Ensuite, tu as juste à créer ton événement onclick pour récupérer l'élément : (attention à bien exécuter cette méthode après ta fonction de création du calendrier) :
document.getElementById("monID").onclick = function(){myScript};


ensuite tu obtiens l'élément ainsi que ses sous éléments, tu peux te balader dans l'arborescence afin de récupérer les valeurs saisies dans le champ de date de l'HTML.

PS : avec jQuery ce serait bien plus concis et lisible.
0
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020
26 janv. 2017 à 19:47
Merci pour cette réponse.
J'ai ajouté un id à la table.
J'ai eu du mal à créer ce calendrier. Peux tu me dire où je dois mettre l'événement..

avec JQuery que je ne connais pas ça donnerait quoi.
0
Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 550
27 janv. 2017 à 10:09
La je te laisse te renseigner pour jQuery..

L’événement doit-être dans ton script, mais la fonction qui lance cet événement doit s'exécuter après celle qui créer ton calendrier (vu que la création de ton calendrier créer des éléments, tu ne pourras pas y ajouter d'événements si ceux-ci ne sont pas encore créés :) )
0