Bonjour à tous,

Je veux créer une application de gestion d'un emploi du temps dans le cadre d'un projet personnel, je voudrais créer un tableau simple, contenant les cases des séances de cours, puis, modifier ces valeurs à l'aide d'un simple clic de souris.

donc, lorsque je clic sur la cellule du tableau, celle ci ce transforme en champ de texte, j'y insère les données, puis lorsque je clique à l'extérieur de celle ci, la valeure insérée est sauvegardée et est affichée.

Seul bémol : Je ne sais pas comment on fait

Si quelqu'un pouvait m'aider en me proposant un tuto ou en me donnant un début de réponse, ça serait sympa

Merci.

Il serait intéressant de connaître ton niveau actuel en JS pour pouvoir te conseiller au mieux.


En l'absence de cette information, voici un code commenté, à adapter à tes besoins :

<table id="edt">
<tr>
<td></td>
<td>Colonne 1</td>
<td>Colonne 2</td>
<td>Colonne 3</td>
</tr>
<tr>
<td>Ligne 1</td>
<td>Plop</td>
<td>Plip</td>
<td>Plap</td>
</tr>
<tr>
<td>Ligne 2</td>
<td>Plop</td>
<td>Plip</td>
<td>Plap</td>
</tr>
</table>

<script type="text/javascript">
function makeEditable(el) {
  // On autorise el à être un id
  if (typeof el === 'string') { el = document.getElementById(el); }
  
  // On récupère les lignes <tr> du tableau
  var lignes = el.rows;
  for (var i = 0, l = lignes.length; i < l; i++) {
    // On récupère les cellules <td> de la ligne
    var cellules = lignes[i].cells;
    for (var j = 0, m = cellules.length; j < m; j++) {
      // On récupère la cellule
      var cellule = cellules[j];
      // On ne s'intéresse pas à la première ligne
      // ni à la première colonne
      if (i > 0 && j > 0) {
        // Quand la cellule est cliquée
        cellule.onclick = function () {
          var cellule = this; // Important pour maintenir la valeur réelle de cellule dans la boucle
          
          if(!cellule.firstChild || // Si la cellule est vide
            !cellule.firstChild.tagName || // Ou ne contient pas un élément HTML
            cellule.firstChild.tagName.toUpperCase() !== 'TEXTAREA') { // Ou ne contient pas un textarea
            var contenu = cellule.innerHTML; // On récupère le contenu de la cellule
            // On vide la cellule
            while (cellule.firstChild) {
              cellule.removeChild(cellule.firstChild);
            }
            var textarea = document.createElement('textarea'); // On crée un textarea
            textarea.value = contenu; // On lui attribue comme valeur le contenu de la cellule
            cellule.appendChild(textarea); // On l'insère dans la cellule
            textarea.focus();
            
            // Lorsque le textarea perd le focus
            textarea.onblur = function () {
              // On crée un noeud de texte avec la valeur du textarea
              var txt = document.createTextNode(textarea.value);
              cellule.replaceChild(txt, textarea); // On remplace le textarea par le noeud de texte
            };
          }
        };
      }
    }
  }
}

window.onload=function() {
  makeEditable('edt');
};
</script>

Si tu veux enregistrer les modifications, et le faire sans recharger la page, il te faudra utiliser Ajax. (Cf tutos)

Excellent ! Merci beaucoup