Déclencher un <a /> depuis l'élément parent

**Picpus** · 20/07/2011, 12h26

Bonjour, très débutant en javascript et dév web en général (j'aime pas ça !), je suis confronté à un soucis qui je suis sur ne va pas vous causer de maux de têtes.

J'ai un

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<td onclick='this.firstChild.click()'> <a href='link' /> </td>

L'idée est que, le texte du <a /> ne remplissant pas le <td>, j'aimerais tout de même en cliquant sur la cellule que le lien soit cliqué, et ce par le biais de this.firstChild.click(), qui marche très bien sur IE, et pas du tout chez les autres.

En debuggant sur Chrome le onclick est bien lancé, j'imagine donc que c'est la syntaxe this.firstChild.click() qui est obsolète et que IE reste compatible parce que IE c'est pas bien ?

Des bisous

**Bovino** · 20/07/2011, 12h35

C'est pourtant expliqué dans la

: Pourquoi le comportement du DOM est-il différent sous FireFox et IE ?

**SpaceFrog** · 20/07/2011, 12h36

ton href est un lien ou un appel de fonction ?.

si c'est un lien:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td onclick="self.location.href=this.getELementsByTagName('a')[0].href"> <a href='link' /> </td>

**Picpus** · 20/07/2011, 13h07

Envoyé par Bovino

Pourquoi le comportement du DOM est-il différent sous FireFox et IE ?

Ca confirme : j'aime pas le dév web !

Merci pour vos réponses rapides, avant de m'aventurer dans la suppression des espaces, il s'agit d'un appel à une fonction JS, y'a-t-il une solution avec une variante de ton code SpaceFrog ?

**Bovino** · 20/07/2011, 13h09

Envoyé par Picpus

y'a-t-il une solution avec une variante de ton code SpaceFrog ?

Oui, un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.getElementsByTagName('a')[0].click()

**SpaceFrog** · 20/07/2011, 13h10

variante ?
Ma solution se fiche des espace puisqu'elle choppe la première balise <a> enfant ...

**Watilin** · 20/07/2011, 13h13

+1 pour Spaffy ! getElementsByTagName est le moyen le plus efficace de ceux qui sont supportés par tous les navigateurs.

Et je confirme, il n’y a pas de méthode click dans la spécification de l’élément <a> : la méthode click sur un lien n'est pas standard.

Des bisous à toi aussi Picpus

**Picpus** · 20/07/2011, 14h23

Farpait, <td onclick="document.location.href = this.getElementsByTagName('a')[0].href;"> fonctionne bien !

Merci

**Shikiryu** · 20/07/2011, 15h35

Je suis peut-être HS mais si le but est de rendre le lien valide dans toute la cellule, un petit peu de CSS suffit (et compatible tout navigateur de base)

exemple dans le cadre d'une hauteur fixe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
a{display:block;height:100%;}
td{width:33px; height:40px;text-align:center;line-height:30px;}

http://jsfiddle.net/Chouchen/rFqkR/1/

**sekaijin** · 21/07/2011, 10h45

j'avoue que je ne comprends pas un simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<td onclick="document.location.href = 'link'">...</td>

pourquoi mettre un a href dans la cellule et un javascript qui va chercher le dit lien pour trouver sa cible et enfin redéfinir la location de la page

alors qu'il suffit dès le départ de mettre de la cible dans le code

pourquoi faire simple ....
A+JYT

**sekaijin** · 21/07/2011, 10h50

Envoyé par Shikiryu

Je suis peut-être HS mais si le but est de rendre le lien valide dans toute la cellule, un petit peu de CSS suffit (et compatible tout navigateur de base)

exemple dans le cadre d'une hauteur fixe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
a{display:block;height:100%;}
td{width:33px; height:40px;text-align:center;line-height:30px;}

http://jsfiddle.net/Chouchen/rFqkR/1/

Non car

Envoyé par Picpus

Bonjour, très débutant en javascript...
L'idée est que, le texte du <a /> ne remplissant pas le <td>, j'aimerais tout de même en cliquant sur la cellule que le lien soit cliqué...

A+JYT

**SpaceFrog** · 21/07/2011, 10h57

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

a{display:block;height:100%;width:100%}

**Shikiryu** · 21/07/2011, 11h03

Si tu mets en display:block, il prend automatiquement 100% du td en largeur

**SpaceFrog** · 21/07/2011, 11h04

exact

mais bon la ceinture ET les bretelles ^^

**sekaijin** · 21/07/2011, 11h14

avec

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

a{display:block;height:100%;width:100%}

le lien va couvrir toute la cellule

mais c'est justement le contraire qui est recherché
le lien ne doit pas couvrir toute la cellule mais le td doit être entièrement clicable

A+JYT

**SpaceFrog** · 21/07/2011, 11h16

?
ben les deux solutions ont été exposées
laissons le choisir celle qui convient à son besoin que nous n'avons pas tous su cerner précisément ... ?

**nadox** · 22/07/2011, 11h22

Bonjour,

Je crois que contraire n'est pas recherché, mais seulement constaté...

**Watilin** · 22/07/2011, 13h33

L'inconvénient de mettre le lien en display: block avec une hauteur à 100%, c'est que le texte sera collé en haut de la cellule. On peut jouer avec padding-top, mais ça demande de connaître à l'avance la hauteur de la cellule, ce qui ajoute des contraintes de style, ou nécessite de passer par JavaScript.