2.6 Travailler avec les attributs data

Les attributs data, aussi appelés attributs de données, sont très pratiques pour permettre au serveur de passer de l'information qui pourra être utilisée dans le code JavaScript.

Le principe est le suivant :

• Dans une balise HTML, on ajoute un attribut dont le nom débute par data-, suivi du mot ou du groupe de mots de votre choix. Il peut y avoir autant d'attributs data que nécessaire.
  HTML

  <td data-id="3" data-description="Lorem ipsum">

• Dans le code JavaScript, on pourra retrouver ces informations à partir du paramètre event reçu par le gestionnaire d'événement. Plus précisément, event.target correspond à l'élément HTML auquel l'événement est rattaché. Dans notre exemple, il s'agit de la balise <td> sur laquelle l'usager a cliqué. 
  JavaScript

  let cellules = document.getElementsByTagName('td');
  
  for (let cellule of cellules) {

      // attache le gestsionnaire d'événement à chaque cellule
      bouton.onclick = function (event) {
          // code à exécuter sur le clic
          let bouton = event.target;
          let id = bouton.dataset.id;
          let description = bouton.dataset.description;
          ...
      };
  }

• Si vous préférez travailler avec jQuery, la valeur peut être retrouvée à l'aide de la méthode data(). Le mot ou le groupe de mots utilisés pour nommer l'attribut seront passés en paramètre.
  jQuery

  $(function() {
      // attache le gestsionnaire d'événement à chaque cellule
      $( "td" ).click(function() {

          // ici, $(this) représente la balise <td> sur laquelle l'usager a cliqué
          let id = $(this).data('id');

          let description = $(this).data('description');

          ...
      });
  });

Pour plus d'information

« Utiliser les attributs de données ». MDN. https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Utiliser_attributs_donnes