Coordonnées cellules d'un tableau

FORUM Tom's Hardware » Programmation » HTML / Javascript » Coordonnées cellules d'un tableau

Coordonnées cellules d'un tableau

Il y a 379 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici

Voir les posts : Par défaut Tous Les bonnes notes Les notes insuffisantes

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Coordonnées cellules d'un tableau

marsien

Je me la pête
Profil : /!\ Docteur - PDG

Plus d'informations

09-05-2007 à 23:34:18

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 :

Code :

'<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>'

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

---------------
.: La Pipicy Team :love:

gatsu@IDN

Plus d'informations

10-05-2007 à 03:42:51

Masquer

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

Plus d'informations

10-05-2007 à 03:48:31

Masquer

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 :