Coordonnées cellules d'un tableau

marsien · 9 Mai 2007

Salut,

Je cherche à récupérer la position (ligne / colonne) des cellules d'un tableau. Je voudrais le faire en javascript.

J'y suis arrivé avec le code suivant :
[cpp]'<td onmouseover="javascript: document.getElementById(\'case'.$case_actuelle.'\').style.display=\'block\'" onmouseout="javascript: document.getElementById(\'case'.$case_actuelle.'\').style.display=\'none\'"><div class="cellule" style="display:none" id="case'.$case_actuelle.'">'.$case_actuelle.'</div></td>'[/cpp]

La variable PHP $case_actuelle est en fait le résultat de la construction dynamique du tableau et retourne les coordonnées de chaque cellule du tableau.

Le problème, c'est que je suis obligé d'insérer ce code dans chaque <td>, or j'en ai 10 000 dans mon tableau^^. Donc c'est trèèèès long à afficher.

Y aurait-il un moyen de récupérer les coordonnées de chaque cellule d'une autre manière, sans être obligé de mettre un code dans chaque <td>. L'objectif final est de faire apparaître un texte au dessus de chaque cellule lors de son survol.

Merci de votre aide

gatsu@IDN · 10 Mai 2007

ouais simple :
Il suffit de savoir que déjà 1 tableau c'est composé de cette manière :

<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<body>
<tr>
<th></th>
</tr>
</tbody>
</table>

En regle général c'est toujours comme ca.
Ensuite en JS c'est ca qui est magique :
Sur le TABLE, tu as 3 attributs qui sont des nodeLists qui pointent vers les élements suivants :
table.tBodies ==> nodelist(array) qui reference tous les tbody du tableau
table.tHeads ==> nodelist(array)qui reference tous les thead du tableau
table.tFoots ==> nodelist(array)qui reference tous les tfoot du tableau

Ensuite pour chaque tbody/thead/tfoot, il y a une nodelist/array qui pointe sur chaque TR : tbody.rows
Ensuite sur chaque TR tu as aussi une node liste qui référence toutes les Cellules de la ligne : tr.cells et aussi un index qui indique la position du TR dans le tbody/thead/tfoot : tr.rowIndex
Ensuite pour les cellules tu as un attribut qui indique la position de la cellule dans le TR : td.cellIndex.

Donc si tu veux connaitre la position d'une cellule dans un tableau :

<td onclick="getCoord(this)">test</td>

function getCoord(cell) {
return [cell.parentNode.rowIndex, cell.cellIndex];
}

getCoord te retourne un array contenant les coordonnées ligne, colonne de la cellule

gatsu@IDN · 10 Mai 2007

Hey mais con que je suis ma réponse n'est pas la bonne par rapport à ton besoin, puisque toi tu cherches juste à afficher cacher le div à l'intérieur de ta cellule, tu n'as pas besoin de passer par des getElementById et autre pitreries de ce genre, et puis tu aurais pu passer par une fonction, c'est quand même bien plus simple

CSS :

Code:

.cellule {visibility:hidden}

Mieux vaut utiliser le visibility que le display dans ton cas puisque ca permet au block de garder la place qu'il prend dans la cellule

HTML

Code:

<td onmouseover="action(this)"><div class="cellule">'.$case_actuelle.'</div></td>

en JS :

Code:

function action(cell) {
    cell.onmouseout = function() {
      cell.firstChild.style.visibility = "hidden";
   }
   
      cell.firstChild.style.visibility = "visible";
   

}

Coordonnées cellules d'un tableau

marsien

gatsu@IDN

gatsu@IDN