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

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:

---

<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

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

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>

---

Citation:

---

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 ?

Citation:

---

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()

---

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

+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 :mrgreen:

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

Merci :D

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/

j'avoue que je ne comprends pas un simple

Code:

---

<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

Citation:

---

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:

---

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

Citation:

---

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

Code:

---

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

---

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

exact :oops:
mais bon la ceinture ET les bretelles ^^

avec

Code:

---

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

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

Bonjour,

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

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.

on peut jouer avec le lineheight

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

Citation:

---

Envoyé par Shikiryu

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

---

Précisément, dans ton exemple (qui est très bon par ailleurs), tu fixes la hauteur du td (40px), ce qui n'est pas forcément voulu. C'est ce que j'essayais de dire plus haut ;)

Citation:

---

Envoyé par Watilin

Précisément, dans ton exemple (qui est très bon par ailleurs), tu fixes la hauteur du td (40px), ce qui n'est pas forcément voulu. C'est ce que j'essayais de dire plus haut ;)

---

Même si ce n'est pas voulu, ça fonctionne (et n'a rien à voir)

http://jsfiddle.net/rFqkR/2/ <-- pas de height, juste des <br/> dans la case d'à côté :) j'ai rajouté des bordures bleues qu'on voit bien les cases.

(et sinon, référence à ta signature, évaluer en js, c'est mal, de base. :mouarf: ;))