Jouer avec les lignes et les colonnes dans un tableau HTML

Le HTML est du XML, la structure d’un tableau HTML n’y echappe pas. Les éléments TR sont compris dans un élément TABLE et les TD dans des éléments TR. Tous ça pour vous expliquer que c’est assez simple de retrouver la ligne d’une cellule, par contre, c’est beaucoup plus compliqué de retrouver la colonne (voir contre nature !)

Voilà trois méthodes illustrées par des exemples :

1. La première consiste à recuperer le TR parent du TD par les dom. Pour les colonnes, on compare la classe du TD qui est sous la souris avec l’ensemble des TD.

if (target.nodeName == ‘TD’) {
 cells = document.getElementsByTagName(« td »);
 for (var c = 0; c < cells.length; c++) {
  //colonne
  if (cells[c].className == target.className) cells[c].style.background = ‘#008000’;
  //ligne
  if (cells[c].parentNode == target.parentNode) cells[c].style.background = ‘#008000’;
 }
}

Tester l’exemple

2. La deuxième consiste à recuperer les lignes et les colonnes grâce aux classes de style. Chaque TD a deux classes, « row1 col3 ». Pour chaque TD, on compare la classe du TD qui est sous la souris avec la classe de chacun des TD.

if (target.nodeName == ‘TD’) {
  //recupération des deux class
  tabClass = target.className.split(‘ ‘);
  
  cells = document.getElementsByTagName(« td »);
  for (var c = 0; c < cells.length; c++) {
    //colonne
    if (cells[c].className.indexOf(tabClass[1])!=-1) cells[c].style.background = ‘#008000’;
    //ligne
    if (cells[c].className.indexOf(tabClass[0])!=-1) cells[c].style.background = ‘#008000’;
  }
}

Tester l’exemple

3. La derniere consiste à ajouter deux attributs sur chaque TD du tableau (col= »2″ row= »4″). Ca ne fonctionne que sous Internet Explorer. Pour que ça marche sous Firefox, il faut que ces valeurs aient été ajouté par DOM (td.col= »2″)

if (target.nodeName == ‘TD’) {
 cells = document.getElementsByTagName(« td »);
  for (var c = 0; c < cells.length; c++) {
    //colonne
    if (cells[c].col == target.col) cells[c].style.background = ‘#008000’;
    //ligne
    if (cells[c].row == target.row) cells[c].style.background = ‘#008000’;   
  }
}

Tester l’exemple

Il y a d’autres pistes :

 – Modéliser le tableau HTML en un tableau Javascript, identifier les lignes et les colonnes sur ce tableau et faire la correspondance avec le tableau HTML

 – Utiliser le framework DOOM…

L’archive des exemples

Un exemple d’utilisation de la bibliothèque AJAXSLT de Google

Google propose une bibliothèque javascript dite « crossbrowsers » permettant d’émuler un moteur xsl.
Dans l’absolue, très bien. Le problème est que c’est très lent !! On a même trouvé des limites sur le Xpath.

Un exemple avec la bibliothèque ajaxslt :
https://www.brico-info.com/scripts_ajaxslt/exemple_ajaxslt_xml_xsl.html

Un exemple avec le moteur xsl de Internet Explorer :
https://www.brico-info.com/scripts_xsl_internet_explorer/exemple_xml_xsl.html

Cette bibliothèque a un interêt, elle permet de faire connaitre le Xpath.

Quelques liens sur la librairie ajaxslt :

Archive de l’exemple AJAXSLT 
Archive de l’exemple Internet Explorer

 

La nouvelle star : L’informatique a bon dos…

http://nouvellestar.m6.fr/html/emissions/nouvelle_star/emission/resume.shtml

Le problème de vote a été recommu !

Par contre, l’explication laisse à désirer : des voix attribuées aux mauvais candidats ???!!

Laissez nous vous dire que l’on y croit pas un instant ! Je reste persuadé d’un rapport entre l’odre de passage et le succès au vote.

Quand à l’huissier de justice qui a certifié les votes de la semaine dernière, il peut aller se rhabiller !