html une ligne d'un tableau, comme un lien
Je ne peux pas définir ma ligne de tableau comme un lien vers quelque chose. Je peux seulement utiliser le css et le html. J'ai essayé différentes choses à partir de div en ligne pour quelque chose d'autre, mais ne peut toujours pas faire de travaux.
Vous devez vous connecter pour publier un commentaire.
Vous avez deux façons de le faire:
À l'aide de javascript:
<tr onclick="document.location = 'links.html';">
L'aide d'ancres:
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
J'ai fait le deuxième travail à l'aide de:
Pour se débarrasser de l'espace mort entre les colonnes:
Ici est une simple démo du deuxième exemple: DÉMO
Je me suis fait une coutume fonction jquery:
Html
jQuery
Facile et parfait pour moi. J'espère que ça vous aide.
(Je sais OP voulez le CSS et le HTML seulement, mais considérer jQuery)
Modifier
D'accord avec Matt Kantor à l'aide de données attr. Édité réponse ci-dessus
data-href
ou somesuch.<table class='tr_link' >
et le donner à.tr_link{cursor:pointer}
en css pour une meilleure utilisation.tr[data-href] { cursor: pointer }
de vos feuilles de styleSi vous êtes sur un navigateur qui le supporte, vous pouvez utiliser les CSS pour transformer le
<a>
dans une ligne de tableau:Bien sûr, vous êtes limité à ne pas mettre les éléments de bloc à l'intérieur de la
<a>
.Vous aussi vous ne pouvez pas mélanger cela avec une régulière
<table>
La manière habituelle consiste à attribuer à certains JavaScript pour la
onClick
attribut de laTR
élément.Si vous ne pouvez pas utiliser JavaScript, alors vous devez utiliser un truc:
Ajouter le même lien à chaque
TD
de la même ligne (le lien doit être la plus externe de l'élément dans la cellule).Tour des liens vers les éléments de bloc:
a { display: block; width: 100%; height: 100%; }
Cette dernière prendra en vigueur le lien pour remplir l'ensemble de la cellule, de sorte cliquant n'importe où invoquera le lien.
Si vous ont pour utiliser une table, vous pouvez mettre un lien dans chaque cellule du tableau:
Et de faire les liens remplir l'ensemble de cellules:
Si vous êtes en mesure d'utiliser
<div>
s au lieu d'une table, votre code HTML peut être beaucoup plus simple, et vous n'obtiendrez pas des "lacunes" dans les liens entre les cellules d'un tableau:Ici, c'est le CSS qui va avec la
<div>
méthode:Vous ne pouvez pas emballer un
<td>
élément avec un<a>
tag, mais vous pouvez accomplir des fonctionnalités similaires à l'aide de laonclick
événement pour appeler une fonction. On en trouve un exemple ici, quelque chose comme cette fonction:Et l'ajouter à votre tableau comme ceci:
Réponse de sirwilliam me correspond le mieux. J'ai amélioré le Javascript avec le soutien pour la touche de raccourci Ctrl + LeftClick (ouvre la page dans un nouvel onglet). Événement
ctrlKey
est utilisée par les PC, lesmetaKey
par Mac.Javascript
Exemple
http://jsfiddle.net/vlastislavnovak/oaqo2kgs/
Je sais que cette question est déjà répondu mais je n'ai toujours pas satisfait de la solution sur cette page. Pour les personnes qui utilisent JQuery j'ai fait une dernière solution qui vous permet de donner à la ligne de la table presque le même comportement que la
<a>
tag.C'est ma solution:
jQuery Vous pouvez ajouter par exemple à un standard inclus fichier javascript
HTML Maintenant, vous pouvez l'utiliser sur n'importe quel
<tr>
élément à l'intérieur de votre HTMLdocument.querySelector('tr[url]').addEventListener("mousedown", function(e){ var click = e.which; var url = this.getAttribute("url"); if(url){ if(click == 1){ window.location.href = url; } else if(click == 2){ window.open(url, '_blank'); window.focus(); } return true; } });
Cela vous évite d'avoir à dupliquer le lien dans le tr - seulement du poisson, le premier un.
Quand je veux simuler un
<tr>
avec un lien, mais en respectant les standards html, je le fais.HTML:
CSS:
De cette façon, quand quelqu'un aller avec sa souris sur un TR, toute la ligne (et c'est lié) obtient le hover style et il ne peut pas voir qu'il y a de multiples liens.
L'espoir peut aider quelqu'un.
Violon ICI
Quelque chose le long de ces lignes, peut-être? Si elle n'utiliser JS, mais c'est la seule façon de faire une ligne (tr) cliquables.
Sauf si vous avez une seule cellule avec une balise d'ancrage qui remplit l'ensemble de la cellule.
Et puis, vous ne devriez pas être en utilisant un tableau de toute façon.
Après la lecture de ce fil, et quelques autres, je suis venu avec la solution suivante en javascript:
Utiliser mettre href tr/td/th que vous avez le désir d'être cliquable comme:
<tr href="http://stackoverflow.com">
.Et assurez-vous que le script ci-dessus est exécuté après le tr élément est créé (par son placement ou à l'aide de gestionnaires d'événements).
L'inconvénient, c'est qu'il ne sera pas totalement faire la TRs se comportent comme des liens avec des divs avecEdit: j'ai fait la navigation au clavier de travail par la mise en onkeydown, le rôle et les tabIndex, vous pouvez supprimer la partie si seule la souris est nécessaire. Ils ne montrent pas l'URL dans la barre d'état sur le vol stationnaire si.display: table;
, et ils ne seront pas de clavier-sélectionnable ou avoir le statut de texte.Vous pouvez style spécifiquement le lien TRs avec "tr[href]" sélecteur CSS.
J'ai une autre façon. Surtout si vous avez besoin d'afficher des données à l'aide de jQuery
Définir la variable d'ensembles de variables dans les SÉANCES de la page, vous allez peut lire et d'agir sur.
Je voudrais vraiment un moyen de poster directement à une fenêtre de l'emplacement, mais je ne pense pas que c'est possible.
Merci pour cette. Vous pouvez modifier le hover icône par l'attribution d'une classe CSS à la ligne comme:
et le CSS ressemble:
Pouvez-vous ajouter Un tag à la ligne?
Est-ce que vous demandez?