Rendre cliquable une partie d'une ligne dans un tableau

Version imprimable

Salut,

Dans une de mes pages HTML, j'ai un tableau avec une liste de produits. Je voudrais que les premières cellules de chaque ligne soit cliquable pour en faire un lien vers une fonction Ajax qui donnerait des infos supplémentaires sur le produit. La dernière case ne doit pas être concernée par ce lien, car elle sert à ajouter le produit au panier.

Visiblement, on ne peut pas englober les éléments cellules (<tr>) concernés dans une balise lien (<a>), donc je suppose qu'on est obligé de passer par JS. Ca m'aurait arrangé de pouvoir faire ca ainsi, pour pouvoir faire de la mise en forme CSS (changement de couleur des cases concernées au passage de la souris).

Voilà (schématiquement) ce que j'avais tenté et qui ne fonctionne pas :
Code:

1 2 3 4 5 6 7 8 9 10 <table> <tr> <a href="...."> <td>Produit 1</td> <td>Marque</td> <td>Prix</td> </a> <td><a href "ajouter_au_panier">Ajouter au panier</a></td> </tr> <table>
Vous voyez une solution à mon problème?
Merci d'avance

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
   <tr>
       <td>Produit 1</td>
       <td>Marque</td>
       <td>Prix</td>
       <td><a href="ajouter_au_panier">Ajouter au panier</a></td>
    </tr>
   <tr>
       <td>Produit 1</td>
       <td>Marque</td>
       <td>Prix</td>
       <td><a href="ajouter_au_panier">Ajouter au panier</a></td>
    </tr>
   <tr>
       <td>Produit 1</td>
       <td>Marque</td>
       <td>Prix</td>
       <td><a href="ajouter_au_panier">Ajouter au panier</a></td>
    </tr>
<table>

Par exemple et une double boucle (sur les tr puis les td) :

Code:

1
2
3
4
5
6
7
8
9
10
var occurences = document.getElementsByTagName('tr').length;
for(var i=0;i<occurences;i++){
var occurences2=occurences.getElementsByTagName('td');
var j = 0
while(j<occurences2.length-1){
occurences2[j].onclick=function(){fonction sur click}
occurences2[j].onmouseover=function(){fonction sur survol couleur/curseur...}
occurences2[j].onmouseout=function(){...}
}
}

Code:

1
2
3
4
5
6
7
8
<table>
   <tr id="produit1">
      <td onclick="fc1(this)">Produit 1</td>
       <td onclick="fc1(this)">Marque</td>
       <td onclick="fc1(this)">Prix</td>
       <td><a href "ajouter_au_panier">Ajouter au panier</a></td>
    </tr>
<table>

Code:

1
2
3
function fc1(obj){
 alert(obj.parentNode.id)
}

:aie:je ne suis pas un fan des appel de fonction dans le href ...

11/09/2008, 15h54
Flackou

Merci, ca me paraît être une solution.

Elle pose quand même encore quelques problèmes :

- Quand je survole une cellule, je voudrais que toutes les autres qui soient cliquables changent aussi de couleur (pour faire comme si on avait bien un seul lien sur les cellules concernées)

- Mon tableau sera éventuellement mis à jour avec Ajax : le script sera-t-il réexécuté sur le tableau "rafraichi"?
11/09/2008, 15h59
Bovino

Citation:

Quand je survole une cellule, je voudrais que toutes les autres qui soient cliquables changent aussi de couleur (pour faire comme si on avait bien un seul lien sur les cellules concernées)

Code:

onmouseover=this.parentNode.style.backgroundColor='yellow'

par exemple.

Citation:

Mon tableau sera éventuellement mis à jour avec Ajax : le script sera-t-il réexécuté sur le tableau "rafraichi"?

Non, tu devras affecter la gestion des événements 'manuellement' ou réexécuter la fonction (si tu choisis ma méthode).

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
<tr class="toto" id="nr_1234">
<td class="link">id produit</td>
<td class="link">name</td>
</tr>
 
 
<style>
 
tr.toto{
 background-color:white;
}
 
tr.toto:hover{
 background-color:red;
}
</style>
 
<script>
 
....
//avec prototype
var elements = Selector.findChildElements($('nr_1234'),['.link']); 
 
for (var i = 0; i < elements.length; i++) {
Event.observe(elements[i], 'click',   function(event) { mafonction(elements); }, false);		
}
...
</script>

11/09/2008, 20h46
SpaceFrog

hover c'est que pour les balises a ...

Citation:

Envoyé par SpaceFrog

hover c'est que pour les balises a ...

Pour IE6 uniquement (http://www.webdevout.net/browser-sup...2pseudoclasses), à tester :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page sans titre</title> <style type="text/css"> div {width:100px; height:100px; background:#ff0000;} div:hover {background:#00ff00;} </style> </head> <body> <div></div> </body> </html>
Et moi je ne suis pas fan du javascript intrusif :mrgreen:

12/09/2008, 11h03
SpaceFrog

Citation:

Pour IE6 uniquement

à ma connaissance pour IE tout court
12/09/2008, 11h09
Bovino

Pour IE7, je crois que cela dépend du doctype...