Discussion :

[Flackou]

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 :

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

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

[Bovino]

Code :

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

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 :

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

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(){...}
}
}

[SpaceFrog]

Code :

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

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 :

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

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

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

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

[Bovino]

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 :

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

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

par exemple.

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

[super-manu]

Code :

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

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>

[SpaceFrog]

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

[franculo_caoulene]

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

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

Code :

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

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

[SpaceFrog]

Pour IE6 uniquement

à ma connaissance pour IE tout court

[Bovino]

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