Récupérer l'id d'une cellule en onClick

Version imprimable

Bonjour tout le monde,

Je suis en face d'un petit problème surement tout bête, mais je ne trouve pas la solution.

Voici le code html de mes cellules et de mes images du tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
?><td bgcolor ="#6095E4" width="50" height="50" onClick="montreimg(this);" ><?php
if ($rand <= $randmax/2)
{
    ?><img style="visibility:hidden" width="50" height="50" src="images/<?php echo $rand ?>.png" id ="img_<?php $i.$j; ?>" border="0" onClick="Click();"/><?php
}
else //Si le rand est plus grand que $rand, on enlève 8 a celui-ci ce qui nous donne 9-8 = 1, 10-8 = 2, 11-8=3, etc...
{
    ?><img style="visibility:hidden" width="50" height="50" src="images/<?php echo $rand-($randmax/2) ?>.png" id ="img_<?php $i.$j; ?>" border="0" onClick="Click();"/><?php
}
?></td>

Et voici le script qui permet de retourner mes images dans le tableau html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    function montreimg(_cell)
    {
        // récupère le premier fils image de la cellule.
        var _firstChildImg = _cell.getElementsByTagName("img")[0];
 
        // si elle est cachée on la montre
        if (_firstChildImg.style.visibility=="hidden")
        {
            _firstChildImg.style.visibility="visible";
        }
        else
        {
            // sinon, l'image est déjà cliqué, l'utilisateur n'est pas une flèche ;o)
            alert ("l'image est déjà retourné...");
        }
    }

l'ID de mes cellules et de mes images sont incrémenter avec des variables en php. Je sais que les variables php ne peuvent pas être utilisé en JS donc il faut trouver un autre moyen, mais c'est là que je suis bloqué...

Merci d'avance pour vos réponses.

11/05/2011, 16h06
SpaceFrog

Code:

function onClick(_cell, _id)

et en choisissant un autre nom pour la fonction :roll:
11/05/2011, 16h17
Varkan

Hum ça ne m'aide pas, pourrais-tu être plus précis ?
11/05/2011, 16h31
SpaceFrog

ben nommer une fonction selon un evenement c'est clairement se tirer une balle dans le pied

de plus tu declares une fonction avec deux arguments et tu n'en passes qu'un :weird:

Code:

onMouseover= "cell_<?php $i.$j; ?>" onClick="onClick(this);" ><?php

onMouseOver doit contenir du javascript
c'est id qui contient l'id de la cellule

on nomme une fonction à partir de ce qu'elle fait et non à partir de l'appel
donc

Code:

onClick="swapImage(this);"

et pour la fonction
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function swapImage(cell) { // récupère le premier fils image de la cellule. var image = _cell.firstChild; // si elle est cachée on la montre if (image.style.visibility=="hidden") { image.style.visibility="visible"; } else { // sinon, l'image est déjà cliqué, l'utilisateur n'est pas une flèche ;o) alert ("l'image est déjà retourné..."); } }
je ne vois pas où il y a des id dans cette affaire
A+JYT

11/05/2011, 17h04
Varkan

J'ai édité mon premier post car j'avais copier/coller mon code avec différents testes, je m'en excuse.

Pour le nom de ma fonction, je l'ai également modifié, ce n'était pas définitif m'enfin pas très important.

Maintenant, avec cette méthode, je cherche à trouver l'id de ma cellule sur laquelle je clique avec l'attribut onclick de mon <td>, est-ce possible ?

Si oui comment y procéder ?
11/05/2011, 17h33
sekaijin
Tu n'a pas mis d'id sur ta cellule

Code:

<td bgcolor ="#6095E4" width="50" height="50" onClick="montreimg(this);" >

pour le récupérer il suffit de faire
Code:

1 2 3 function montreimg(cell) { alert(cell.id); }
11/05/2011, 18h53
NoSmoking

Citation:

Maintenant, avec cette méthode, je cherche à trouver l'id de ma cellule sur laquelle je clique avec l'attribut onclick de mon <td>, est-ce possible ?

oui si elle existe...l'ID

Je ne vois pas la finalité de récupérer l'ID de la cellule pour afficher/masquer une image contenue à l'intérieur de celle ci!!!
11/05/2011, 21h28
sekaijin

je ne comprends pas non plus j'ai donné la solution au dessus

les id ne servent à rien dans ce cas

A+JYT
12/05/2011, 08h23
Varkan

Merci pour vos réponses.

Hum décidemment je fais tout de travers... Voici mon <td> au complet cette fois-ci :

Code:

<td bgcolor ="#6095E4" width="50" height="50" id= "cell_<?php $i.$j; ?>" onClick="onClick(this);" >

le $i et le $j me permettent d'incrémenter mon tableau et d'avoir les coordonnées de chaque cases, exemple

1.1, 1.2, 1.3,1.4
2.1, 2.2, 2.3, 2.4 etc.

Pourquoi je cherche l'ID ? En fait l'id correspondrait aux coordonnées de ma cellule et ensuite je pourrai, avec une autre fonction, comparer les deux images, et à l'aide des coordonnées, si les images sont les mêmes, les laisser retourner.

Peut-être y-a-t-il une autre solution pour les garder en mémoire et les laisser retourner si celles-ci sont semblables ?

C'est comme ça que je vois mon Memory en fait.

Mais le problème, c'est que mes variables sont en PHP... Et ces variables sont indispensables pour les coordonnées. Maintenant je sais pas s'il existe une méthode quelconques.. enfin bref, j'ai pas de solution et celle donnée ne fonctionne pas avec mes variables.
12/05/2011, 08h36
SpaceFrog

colIndex et rowIndex ne te conviendraient pas ?
12/05/2011, 08h45
Varkan

J'ai déjà essayé, mais je n'arrive pas à les utiliser. Pourrais-tu me faire un exemple ?

Merci d'avance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
<script language="JavaScript">
    function foo(elem) {
        var ligne = elem.parentNode.rowIndex; 
        var colonne=elem.cellIndex;
        alert(ligne +"."+colonne);
    }
 
    function init(){
    cellules=document.getElementsByTagName('td')
    var i=-1;
    while (cellules[++i]){
    cellules[i].onclick=function(){foo(this)}
 
    }
    }
</script>
</head>
<body onload='init()'>    
 
<table width="100" border="3" cellspacing="2" cellpadding="2">
   <tr id="tr1" >
       <td>Ligne 1</td>
       <td>Ligne 1</td>
       <td>Ligne 1</td>
    </tr>
   <tr id="tr2" > 
       <td>Ligne 2</td>
       <td>Ligne 2</td>
       <td>Ligne 2</td>
    </tr>
   <tr id="tr3" > 
       <td>Ligne 3</td>
       <td>Ligne 3</td>
       <td>Ligne 3</td>
    </tr>
   <tr id="tr4" > 
		<td>Ligne 4</td>
       <td>Ligne 4</td>
       <td>Ligne 4</td>
    </tr
</table>
</body>

12/05/2011, 09h40
Varkan

Géniale ! C'est exactement ce que je recherchais !

Grâce à toi je vais pouvoir continuer dans mon projet !

Je suis peut-être agaçant, mais j'ai un peu de peine à comprendre la fonction init() enfin juste la boucle while et pourquoi la variable i est à -1.

J'aime pas copier /coller bêtement un code, j'aime savoir son utilité et comprendre son fonctionnement.

Merci encore.

la fonction init est là pour attribuer les onclick a toutes les cellules du table

pour ce qui est du principe de la boucle
Code:

1 2 3 4 5 6 function init(){ cellules=document.getElementsByTagName('td') // recupère la collection de tous les td sur la page var i=-1; while (cellules[++i]){ //tant que il existe un element cellule avec l'indexe ++i cellules[i].onclick=function(){foo(this)} // on attribue à la cellule une fonction sur son click
Pour ce qui est de ++i
c'est un incrément immédiat

un exemple pour comprendre
Code:

1 2 3 4 5 6 7 var ==-1 alert(++i) alert(++i) var i=-1 alert(i++) alert(i++)
Dans le premier cas l'incrément est appliqué immédiatement
Dans le second l'increment se fait après l'interprétation de la ligne

pourquoi commencer avec i=-1 ?
une collection commence à l'indexe 0
la première cellule de la collection est donc cellules[0]
dans la boucle la première itération pointe donc sur cellules [++ (-1) ] =>[0] puisque l'incrément est immédiat

L'interet de cette technique ? Les boucle while sont plus rapides que les boucles for et j'ai un calcul de length en moins puisque la boucle for nécessiterait une limite cellules.length

12/05/2011, 10h22
Varkan

Merci pour tout vraiment, je comprend beaucoup mieux maintenant :)

Donc sujet résolu, merci à tous.