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

[Varkan]

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.

[SpaceFrog]

Code :

function onClick(_cell, _id)

et en choisissant un autre nom pour la fonction

[Varkan]

Hum ça ne m'aide pas, pourrais-tu être plus précis ?

[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

[sekaijin]

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 html :

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

[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 ?

[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);
}

[NoSmoking]

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

[sekaijin]

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

les id ne servent à rien dans ce cas

A+JYT

[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.

[SpaceFrog]

colIndex et rowIndex ne te conviendraient pas ?

[Varkan]

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

Merci d'avance.

[SpaceFrog]

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>

[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.

[SpaceFrog]

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

[Varkan]

Merci pour tout vraiment, je comprend beaucoup mieux maintenant

Donc sujet résolu, merci à tous.