18041 sujets

Questions générales et questions de débutants

Mettre un lien sur la totalité d'une ligne d'un tableau

Bonsoir tout le monde.
Je dispose d'un tableau avec un listing d'éléments et plusieurs colones.
Et je veux pour chaque ligne avoir accés à la page de détail , et cela en cliquant sur n'importe quel élement de la ligne.

Pour l'instant lorsque j'ai fait ceci:

tr.listFournisseur:hover
{
background-color:#FF9900;
}

Donc lorsque je survole un élement de la ligne , toute la ligne se met ORANGE, et dans le même principe j'aimerai que le lien soit sur la ligne entiere et non pas sur un des élements...enfin je ne sais pas trop comment expliquer

Avez vous une idée ???
Merci d'avance bye
Salut rock13,

j'ai déplacé ton sujet qui me semble avoir peu de rapport avec le CSS. Smiley cligne

Pour faire ce que tu veux il suffirait que le lien soit sur toute la ligne. Malheureusement comme tu as plusieurs cellules c'est impossible puisque l'élément A ne peut pas contenir d'éléments TD. La seule solution que je vois est d'utiliser du javascript sur l'élément TR (onclick...)

Penses à prévoir le cas où JS est désactivé en ayant une cellule contenant le lien que tu supprimera via JS.

A+
Ok , et donc il me suffirait de mettre quelque chose du genre

<a href="index.php?visu=$id" onclick="window.open(this.href); return false;"><tr></a>

??
Modifié par rockt13 (05 Nov 2008 - 23:07)
Euh... non Smiley langue !

Plutôt quelque chose comme
<tr onclick="window.location.href = 'mapage.php'">

A noter que si ton Doctype est en xhtml c'est onclick et pas onClick
Modifié par Heyoan (06 Nov 2008 - 02:24)
OK je vais essayer , mais ca ne va pas me l'ouvrir en blank ?
Et si je voudrais bien faire il faudrais faire cela non :
onclick="OuverturePropre(url)"

Et la si le java est activé je fait window.location...sinon je place un lien sur le 1er <td> de ma <tr>

C'est ca le principe ?
Un pitit exemple (certainement améliorable) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
<script type="text/javascript"><!--
//fonction Liens sur tous les TRs
function AjoutLiensTRs()
{
	// si les méthodes n'existent pas, on sort...
	if(!document.getElementById || !document.getElementsByTagName)
	{
		return;
	}

	// Pour chaque dernier TD de chaque TR...
	var oTable = document.getElementById("matable");
	var oTRs = oTable.getElementsByTagName("TR");
	for(var iI = 0; iI < oTRs.length; iI++){
		var lien = oTable.rows[iI].cells[3].firstChild;
		var url = lien.getAttribute("href");
		// Suppression du dernier TD
		oTRs[iI].deleteCell(3);
		// Ajout d'un évènement onclick sur le TR
		oTRs[iI].onclick= new Function("window.location.href='"+url+"'");
	}
}
window.onload=AjoutLiensTRs;
--></script>
</head>
<body>
<table id="matable">
  <tr>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
    <td><a href="lien1.php">Afficher</a></td>
  </tr>
  <tr>
    <td>bbb</td>
    <td>bbb</td>
    <td>bbb</td>
    <td><a href="lien2.php">Afficher</a></td>
  </tr>
  <tr>
    <td>ccc</td>
    <td>ccc</td>
    <td>ccc</td>
    <td><a href="lien3.php">Afficher</a></td>
  </tr>
</table>
</body>
</html>

Modifié par Heyoan (06 Nov 2008 - 04:01)
Administrateur
Bonjour,

pouquoi ne pas répéter le même lien à l'intérieur de chaque cellule?
<tr>
<td>
<a href="#">
...
</a>
</td>
<td>
<a href="#">
...
</a>
</td>
<td>
<a href="#">
...
</a>
</td>
</tr>


EDIT: pour l'effet graphique "toute la ligne en orange", un script JS pour IE et du CSS pour les navigateurs plus récents. Ainsi ta page est fonctionnelle même sans JS et conforme à ce que tu souhaites sur tous les navigateurs si JS est activé.
Modifié par Felipe (06 Nov 2008 - 12:10)
Felipe a écrit :
pour l'effet graphique "toute la ligne en orange", un script JS pour IE et du CSS pour les navigateurs plus récents.

JS pour IE6 uniquement, dans ce cas. IE7 fait partie des navigateurs «plus récents» qui comprennent plutôt bien la pseudo-classe :hover.

Sinon, pour la question principale j'éviterais de mettre des liens partout. Ça peut être problématique si on a des informations dans le tableau qui n'identifient pas bien la cible du lien.

Je ferais donc un tableau normal avec un lien classique dans une cellule du tableau (et je soulignerais ce lien, pour qu'il soit plus facilement identifié par les utilisateurs). Le lien devra porter sur un texte qui identifie clairement la cible: titre d'une page ou d'un document, référence unique, etc.

Ensuite, en JS, je ferais ceci:
- au clic sur les TD (ou éventuellement TR si ça passe sur IE), récupérer la valeur du href du lien dans la bonne cellule sur la ligne cliquée;
- utiliser un window.location.href pour charger la destination du lien en question.
Florent V. a écrit :

Je ferais donc un tableau normal avec un lien classique dans une cellule du tableau (et je soulignerais ce lien, pour qu'il soit plus facilement identifié par les utilisateurs). Le lien devra porter sur un texte qui identifie clairement la cible: titre d'une page ou d'un document, référence unique, etc.

Ensuite, en JS, je ferais ceci:
- au clic sur les TD (ou éventuellement TR si ça passe sur IE), récupérer la valeur du href du lien dans la bonne cellule sur la ligne cliquée;
- utiliser un window.location.href pour charger la destination du lien en question.
Smiley confuse Hmm... j'ai loupé quelque chose ou bien cela correspond exactement à mon bout de code ? Smiley langue
Sujet clos
Aller à