Je me suis fait une fonction jQuery personnalisée:

Html

<tr data-href="site.com/whatever">

JQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

Facile et parfait pour moi. J'espère que ça vous aide.

(je sais que OP ne veut que CSS et HTML, mais considère jQuery)

Modifier

D'accord avec Matt Kantor en utilisant les données attr. Réponse modifiée ci-dessus

Si vous êtes sur un navigateur qui le supporte, Vous pouvez utiliser CSS pour transformer le <a> en une ligne de table:

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Bien sûr, vous êtes limité à ne pas mettre d'éléments de bloc à l'intérieur du <a>. Vous ne pouvez pas non plus mélanger cela avec un <table>

La manière habituelle est d'attribuer du JavaScript à l'attribut onClick de l'élément TR.

Si vous ne pouvez pas utiliser JavaScript, vous devez utiliser une astuce:

1. Ajoutez le même lien à chaque TD de la même ligne (le lien doit être l'élément le plus externe de la cellule).

2. Transformer les liens en éléments de bloc: a { display: block; width: 100%; height: 100%; }

Ce dernier forcera le lien à remplir toute la cellule afin de cliquer n'importe où appellera le lien.

{Si vous[7]}ont utilisation d'une table, vous pouvez mettre un lien dans chaque cellule du tableau:

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

Et faire en sorte que les liens remplissent les cellules entières:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

Si vous êtes capable d'utiliser <div> s au lieu d'une table, votre HTML peut être beaucoup plus simple, et vous n'obtiendrez pas de "lacunes" dans les liens, entre les cellules de la table:

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

Voici le CSS qui va avec la méthode <div>:

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}

Vous ne pouvez pas envelopper un élément <td> avec une balise <a>, mais vous pouvez accomplir des fonctionnalités similaires en utilisant l'événement onclick pour appeler une fonction. Un exemple se trouve ici , quelque chose comme cette fonction:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

Et ajoutez-le à votre table comme ceci:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

La réponse de sirwilliam me convient le mieux. J'ai amélioré le Javascript avec le support de la touche de raccourci Ctrl + LeftClick (ouvre la page dans un nouvel onglet). L'événement ctrlKey est utilisé par les PC, metaKey par Mac.

Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

Exemple

Http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

Je sais que cette question est déjà répondue mais je n'aime toujours aucune solution sur cette page. Pour les personnes qui utilisent JQuery, j'ai fait une solution finale qui vous permet de donner à la ligne de table presque le même comportement que la balise <a>.

C'est ma solution:

JQuery Vous pouvez ajouter par exemple à un standard inclus fichier javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 1){
            window.location.href = url;
        }
        else if(click == 2){
            window.open(url, '_blank');
            window.focus();
        }
        return true;
    }
});

HTML Maintenant, vous pouvez l'utiliser à tout <tr> élément à l'intérieur de votre HTML

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>

Cela vous évite d'avoir à dupliquer le lien dans le tr - seulement du poisson, le premier un.

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

Quand je veux simuler un <tr> avec un lien mais en respectant les normes html, je le fais.

HTML:

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS:

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

De cette façon, quand quelqu'un va avec sa souris sur un TR, toute la ligne (et ce lien) obtient le style hover et il ne peut pas voir qu'il y a plusieurs liens.

L'espoir peut aider quelqu'un.

Violon ICI

//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Quelque chose dans ce sens peut-être? Bien qu'il utilise JS, mais c'est le seul moyen de rendre une ligne (tr) cliquable.

Sauf si vous avez une seule cellule avec une balise d'ancrage qui remplit la cellule entière.

Et puis, vous ne devriez pas utiliser une table de toute façon.

Après avoir lu ce fil et d'autres, j'ai trouvé la solution suivante en javascript:

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

Pour l'utiliser, Mettez le href dans tr / td / th que vous désirez être cliquable comme: <tr href="http://stackoverflow.com">. Et assurez-vous que le script ci-dessus est exécuté après la création de l'élément tr (par son placement ou en utilisant des gestionnaires d'événements).

l'inconvénient est qu'il ne fera pas totalement les TRs se comporter comme des liens comme avec divs avec display: table;, et ils ne seront pas sélectionnables au clavier ou n'auront pas de texte d'état. Edit: J' fait fonctionner la navigation au clavier en définissant onkeydown, role et tabIndex, vous pouvez supprimer cette partie si seulement la souris est nécessaire. Ils ne montreront pas l'URL dans la barre d'état en survolant cependant.

Vous pouvez styliser spécifiquement le lien TRs avec le sélecteur CSS " tr [href]".

J'ai un autre moyen. Surtout si vous avez besoin de publier des données en utilisant jQuery

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

Set variable met en place des variables dans les SESSIONS que la page que vous allez lire et agir sur.

Je voudrais vraiment un moyen de poster directement à un emplacement de fenêtre, mais je ne pense pas que ce soit possible.

Merci pour ça. Vous pouvez modifier l'icône de survol en attribuant une classe CSS à la ligne comme:

<tr class="pointer" onclick="document.location = 'links.html';">

Et le CSS ressemble à:

<style>
    .pointer { cursor: pointer; }
</style>

Pouvez-vous ajouter une balise A à la ligne?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

Est-ce ce que vous demandez?