Lier toute la rangée de table?

Question

Je sais qu'il est possible de lier une cellule de table entière avec CSS.

Existe-t-il un moyen d'appliquer un lien vers une rangée de table entière?

Answer 1

Je suis d'accord avec Matti. Serait facile à faire avec un peu de javascript simple. Un exemple rapide jquery serait quelque chose comme ceci:

et

puis dans votre CSS

Answer 2

Malheureusement, aucune. Pas de HTML et CSS. Vous avez besoin d'un a élément pour faire un lien, et vous ne pouvez pas vous envelopper toute une ligne de la table dans une.

Le plus proche que vous pouvez obtenir est de relier chaque cellule du tableau. Personnellement, j'avais juste un lien entre une cellule et utiliser JavaScript pour le reste cliquable. Il est bon d'avoir au moins une cellule qui ressemble vraiment à un lien, a souligné toutes et à tous, pour plus de clarté, de toute façon.

Voici un simple jQuery extrait de rendre toutes les lignes de la table avec des liens cliquables (il semble pour le premier lien et "clics" c')

$("table").on("click", "tr", function(e) {
    if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
        return;

    location.href = $(this).find("a").attr("href");
});

Answer 3

Exemple: http://dl.dropbox.com/u/2915462/probonopublico/linktablerow.html

Lien de toute la ligne:

<table>
  <tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
    <td> ...content... </td>
    <td> ...content... </td>
    ...
  </tr>
</table>

Le forum que vous préférez le mettre en surbrillance sur la souris pour l'ensemble de la ligne, puis:

<table class="nogap">
  <tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
     ...
  </tr>
</table>

avec quelque chose comme ce qui suit pour le css, qui permettra d'éliminer l'écart entre les cellules d'un tableau et modifier l'arrière-plan sur le vol stationnaire:

tr.lovelyrow{
  background-color: hsl(0,0%,90%);
}

tr.lovelyrow:hover{
  background-color: hsl(0,0%,40%);
  cursor: pointer;
}

table.nogap{
  border-collapse: collapse;
}

Ssi vous êtes à l'aide de Rails 3.0.9 alors vous pourriez trouver cet exemple de code utile:

La mer a beaucoup de Poissons, le Poisson a de nombreuses Échelles, ici est extrait de l'app/view/poisson/index.erb

<table>
<% @fishies.each do |fish| %>
  <tr onclick="location.href='<%= sea_fish_scales_path(@sea, fish) %>'"> 
    <td><%= fish.title %></td>
  </tr>
<% end %>
</table>

avec @fishies et @mer sont définis dans app/controllers/seas_controller.rb

Answer 4

Je me sens comme la solution la plus simple est sans javascript et tout simplement mettre le lien dans chaque cellule (à condition que vous n'avez pas de ravins massifs entre vos cellules ou vraiment penser aux frontières). Ayez votre css:

puis ajoutez un lien par cellule :

ennuyeux mais propre.