Déclencher un <a /> depuis l'élément parent [Résolu]

[Picpus]

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 :

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

C'est pourtant expliqué dans la : Pourquoi le comportement du DOM est-il différent sous FireFox et IE ?

[SpaceFrog]

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

si c'est un lien:

Code :

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

[Picpus]

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]

Envoyé par Picpus

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

Oui, un truc du genre

Code :

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

[SpaceFrog]

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

[Watilin]

+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]

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

Merci

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

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]

j'avoue que je ne comprends pas un simple

Code html :

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

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 :

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]

Code :

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

[Shikiryu]

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

[SpaceFrog]

exact
mais bon la ceinture ET les bretelles ^^

[sekaijin]

avec

Code css :

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]

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

Bonjour,

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

[Watilin]

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.

[SpaceFrog]

on peut jouer avec le lineheight

[Shikiryu]

cf mon exemple plus haut dont je remet le lien http://jsfiddle.net/Chouchen/rFqkR/1/