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

Résolu/Fermé
Signaler
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
-
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
-
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

1 réponse

Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
406
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.
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

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.
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
406
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 :) )