Je ne peux pas définir ma ligne de tableau comme lien vers quelque chose. Je ne peux utiliser que css et html. J'ai essayé différentes choses de div en ligne à quelque chose d'autre, mais je n'arrive toujours pas à le faire fonctionner.

Vous pouvez procéder de deux manières:

• Utilisation de javascript:

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

• Utilisation d'ancres:

  <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

J'ai fait le deuxième travail en utilisant:

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

Pour se débarrasser de l'espace mort entre les colonnes:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Voici une simple démo du deuxième exemple: DEMO

Je me suis créé 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. Espérons que cela vous aide.

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

Éditer

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

Si vous utilisez un navigateur qui le prend en charge, vous pouvez utiliser CSS pour transformer le <a>en une ligne de tableau:

.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 dans le fichier <a>. Vous ne pouvez pas non plus mélanger cela avec un<table>

Si vous devez utiliser un tableau, 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 faites en sorte que les liens remplissent toutes les cellules:

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

Si vous pouvez utiliser <div>s au lieu d'un tableau, votre HTML peut être beaucoup plus simple, et vous n'aurez pas de "trous" dans les liens, entre les cellules du tableau:

<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 accompagne la <div>méthode:

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

La méthode habituelle consiste à attribuer du JavaScript à l' onClickattribut de l' TRélément.

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

1. Ajoutez le même lien à chacune TDdes mêmes lignes (le lien doit être l'élément le plus à l'extérieur de la cellule).

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

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

Vous ne pouvez pas encapsuler un <td>élément avec une <a>balise, mais vous pouvez réaliser des fonctionnalités similaires en utilisant l' onclickévénement 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 tableau 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 du raccourci clavier Ctrl + Clic gauche (ouvre la page dans un nouvel onglet). L'événement ctrlKeyest utilisé par les PC, metaKeypar 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 a déjà reçu une réponse 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 du tableau presque le même comportement que la <a>balise.

Voici ma solution:

jQuery Vous pouvez ajouter ceci par exemple à un niveau compris 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 Vous pouvez maintenant l'utiliser sur n'importe quel <tr>élément de votre HTML

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

Quand je veux simuler un <tr>avec un lien mais en respectant les standards 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 ces liens) obtient le style de survol et il ne peut pas voir qu'il y a plusieurs liens.

L'espoir peut aider quelqu'un.

Violon ICI

Cela vous évite d'avoir à dupliquer le lien dans le tr - il suffit de le pêcher dans le premier a.

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

//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 de ce genre 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 toute la cellule.

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

Après avoir lu ce fil et quelques 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 utiliser le mettre 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 que les TR ne se comportent pas totalement comme des liens comme avec les divs avec display: table;, et ils ne seront pas sélectionnables au clavier ou n'auront pas de texte d'état. Edit: J'ai fait fonctionner la navigation au clavier en définissant onkeydown, role et tabIndex, vous pouvez supprimer cette partie si seule la souris est nécessaire. Cependant, ils n'afficheront pas l'URL dans la barre d'état lors du survol.

Vous pouvez styliser spécifiquement les TR de lien 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 configure des variables dans SESSIONS que la page que vous allez consulter peut lire et sur laquelle agir.

J'aimerais vraiment avoir un moyen de publier directement dans une fenêtre, mais je ne pense pas que ce soit possible.

Merci pour cela. Vous pouvez changer 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?