{"id":308,"date":"2008-10-17T10:11:57","date_gmt":"2008-10-17T08:11:57","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=308"},"modified":"2008-10-17T10:11:57","modified_gmt":"2008-10-17T08:11:57","slug":"manipuler-une-table-via-le-dom","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/manipuler-une-table-via-le-dom\/","title":{"rendered":"Manipuler une table via le DOM"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Lorsque l’on apprend le DOM, la plupart des didactitiels<\/a> que l’on trouve sur le net se termine en montrant comment on peut cr\u00e9er “from scratch<\/em>” une table en utilisant uniquement les propri\u00e9t\u00e9s du DOM Level 1. Du fait de la complexit\u00e9 de la structure d’une table en HTML, cet exemple montre l’efficacit\u00e9 du DOM, mais oublie de mentionner au d\u00e9veloppeur l’existence de propri\u00e9t\u00e9s et de m\u00e9thodes DOM plus simples pour manipulation les tables HTML.
\n\"\"<\/a>Pour utiliser ces m\u00e9thodes et ces propri\u00e9t\u00e9s sp\u00e9cifiques, il faut tout d’abord pouvoir s\u00e9lectionner la table que l’on veut manipuler. Pour cela, rien de plus simple que d’utiliser getElementById<\/code> par exemple. Une fois la table s\u00e9lectionn\u00e9e, la manipulation de celle-ci devient un jeu d’enfant. Le DOM va repr\u00e9senter la table comme \u00e9tant un tableau compos\u00e9 de lignes (rows<\/code>) et chacune d’entre elle sera compos\u00e9e de cellules (cells<\/code>). Ainsi, si je veux acc\u00e9der \u00e0 la troisi\u00e8me case de la 5\u00e8me ligne de ma table je pourrais \u00e9crire le code suivant :<\/p>\n

var mycell = document.getElementById('matable').rows[2].cells[4];\n\/\/Rappel : en javascript l'indexation des tableau commence par 0<\/pre>\n
Il existe une multitude de m\u00e9thodes sp\u00e9cifiques et gr\u00e2ce \u00e0 celles-ci et au DOM on peut plus facilement construire une table<\/a>. Petit b\u00e9mol, Il faudra se rappeler que si l’on peut acc\u00e9der aux balises sp\u00e9cifiques des cellules, th<\/code> et td<\/code>, via la m\u00e9thode cells<\/code>, en revanche, on ne peut pas cr\u00e9er de balises th<\/code> avec la m\u00e9thode d’insertion de cellule insertCell<\/code>.<\/strong> <\/a><\/p>\n
Retirer<\/a> ou \u00a0ajouter une ligne<\/a> est tout aussi facile. Noter que pour ajouter une ligne en fin de tableau, il suffit de donner comme index -1<\/code> \u00e0 la m\u00e9thode insertRow<\/code>. Autre remarque, l’ajout de cellules lors de la cr\u00e9ation d’une ligne n’est pas obligatoire, insertRow<\/code> ajoutera la ligne mais celle-ci ne contiendra aucune cellule.  Que peut-on retirer de ces exemples ?<\/p>\n
    \n
  1. Les lignes et les cellules sont manipul\u00e9es en fonction de leur index dans le tableau qui repr\u00e9sente notre table. Lors du changement du nombre de lignes ou de cellules, le tableau est  automatiquement r\u00e9-ind\u00e9x\u00e9.<\/li>\n
  2. La balise de r\u00e9f\u00e9rence \u00e0 partir de laquelle la manipulation des lignes est r\u00e9alis\u00e9e est tr\u00e8s importantes. En fonction de cette balise, (table<\/code>, thead<\/code>, tfoot<\/code>, tbody<\/code>) l’indexation et donc la manipulation des lignes est diff\u00e9rentes.<\/li>\n
  3. Lorsque l’on cr\u00e9e une table via javascript la balise tbody<\/code> est implicitement cr\u00e9\u00e9e par le navigateur. Une table pouvant contenir plusieurs tbody<\/code>, la localisation du tbody<\/code> que vous d\u00e9sirez manipuler peut se faire avec la m\u00e9thode DOM getElementsByTagName<\/code>.<\/li>\n
  4. La balise de r\u00e9f\u00e9rence lors de la manipulation des cellules via leurs m\u00e9thodes respectives, insertCell<\/code> et deleteCell<\/code> est leur ligne parent (tr<\/code>).<\/li>\n
  5. Il existe une diff\u00e9rence majeur entre deleteCell<\/code>, deleteRow<\/code> et removeNode<\/a><\/code>. removeNode<\/code>, \u00e0 l’inverse de deleteCell<\/code> et de deleteRow<\/code> n’efface pas d\u00e9finitivement le noeud du document et permet de r\u00e9-ins\u00e9rer celui-ci ailleurs.<\/li>\n<\/ol>\n
    En mixant ces diff\u00e9rentes m\u00e9thodes avec le DOM et le javascript de tous les jours j’ai pu r\u00e9aliser un script qui me permet de faire bouger les diff\u00e9rentes lignes d’un tableau<\/a> tr\u00e8s facilement. Il existe d’autres propri\u00e9t\u00e9s sp\u00e9cifiques aux tables<\/a>, mais je n’ai expos\u00e9 que les m\u00e9thodes que j’ai estim\u00e9 les plus utiles.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Comment manipuler plus facilement avec des m\u00e9thodes et des propri\u00e9t\u00e9s DOM sp\u00e9cifiques les tableaux en HTML  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[130,131,153,154,163,279,281,292,509,518,526],"class_list":["post-308","post","type-post","status-publish","format-standard","hentry","category-web","tag-createtfoot","tag-createthead","tag-deletecell","tag-deleterow","tag-dom","tag-insertcell","tag-insertrow","tag-javascript","tag-table","tag-tbodies","tag-thead"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=308"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/308\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}