vous ne pouvez pas faire ça. Il est invalide HTML. Vous ne pouvez pas mettre un <a> entre un <tbody> et un <tr> . Essayez plutôt ceci:

<tr onclick="window.location='#';">
   ...
</tr>

lorsque vous travaillez dessus, vous voulez utiliser JavaScript pour assigner le gestionnaire de clic en dehors du HTML.

vous pourriez inclure une ancre à l'intérieur de chaque <td> , comme ceci:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

vous pouvez alors utiliser display:block; sur les ancres pour rendre la rangée complète cliquable.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

exemple de jsFiddle ici.

ceci est probablement aussi optimal que vous allez l'obtenir à moins que vous recouriez à JavaScript.

Oui, mais pas avec les éléments de la norme <table> . Si vous utilisez les propriétés de style display: table , vous pouvez. Ici et ici sont quelques-uns des violons à démontrer.

ce code devrait faire l'affaire:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div class="table">
  <div class="row">
    <div class="cell">
      1.1
    </div>
    <div class="cell">
      1.2
    </div>
    <div class="cell">
      1.3
    </div>
  </div>

  <a class="row" href="#">
    <div class="cell">
      2.1
    </div>
    <div class="cell">
      2.2
    </div>
    <div class="cell">
      2.3
    </div>
  </a>
</div>

Veuillez noter que les rôles aria sont utilisés pour assurer une accessibilité adéquate puisque les éléments <table> ne sont pas utilisés. Vous pouvez il faut ajouter des rôles supplémentaires comme role="columnheader" , s'il y a lieu. Pour en savoir plus, consultez le guide ici .

vous pouvez utiliser ce composant bootstrap:

http://jasny.github.io/bootstrap/javascript/#rowlink

Jasny Bootstrap

les composants manquants pour votre cadre frontal préféré.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

Utilisation

Via des attributs de données

ajouter la classe .rowlink et l'attribut data-link="row" à un <table> ou <tbody> élément. Pour les autres options ajouter le nom aux données -, comme dans data-target="a.mainlink" une cellule peut être exclue en ajoutant la classe .rowlink-skip à la <td> .

Via JavaScript

appelez le masque d'entrée par javascript:

$('tbody.rowlink').rowlink()

vous pouvez utiliser la méthode javascript onclick dans tr et la rendre cliquable, aussi si vous avez besoin de construire votre lien En raison de certains détails, vous pouvez déclarer une fonction dans javascript et l'appeler dans onclick, en passant quelques valeurs.

voici un moyen de placer un élément transparent A sur les lignes de la table. Les avantages sont:

• est un élément de lien réel: en vol stationnaire change le pointeur, affiche le lien cible dans la barre d'état, peut être consulté au clavier, peut être ouvert dans un nouvel onglet ou une nouvelle fenêtre, L'URL peut être copiée, etc
• le tableau est le même que sans le lien ajouté
• pas de changement dans le code de table lui-même

Inconvénients:

• taille de l'élément doit être définie dans un script, à la fois sur la création et après la modification de la taille de la ligne qu'il couvre (sinon, il pourrait être fait avec pas de JavaScript, ce qui est toujours possible si la taille de la table est également définie dans le code HTML ou CSS)

La table reste est:

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

ajouter les liens (pour chaque ligne) via jQuery JavaScript en insérant un élément A dans chaque première colonne et définition des propriétés nécessaires:

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

le réglage de la largeur et de la hauteur peut être délicat, si beaucoup de paddings et de marges sont utilisés, mais en général quelques pixels off ne devrait même pas avoir d'importance.

Live demo ici: http://jsfiddle.net/qo0dx0oo/ (fonctionne sous Firefox mais pas IE ou Chrome, il y a le lien est positionné à tort)

fixé pour Chrome et IE (fonctionne toujours en FF aussi): http://jsfiddle.net/qo0dx0oo/2 /

une solution beaucoup plus flexible est de cibler n'importe quoi avec l'attribut data-href. C'était, vous pouvez réutiliser le code facilement dans des endroits différents.

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

alors dans votre jQuery, ciblez n'importe quel élément avec cet attribut:

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

et n'oubliez pas de styliser votre css:

[data-href] {
    cursor: pointer;
}

maintenant vous pouvez ajouter l'attribut data-href à n'importe quel élément et cela fonctionnera. Quand j'écris des bribes de ce genre, j'aime à être flexible. N'hésitez pas à y ajouter une solution vanille js si vous en avez une.

une Autre option à l'aide d'un <a> , CSS positions et certains jQuery ou JS :

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

ensuite, vous devez donner la largeur a, en utilisant par exemple jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

ce code ci-dessous va rendre votre table cliquable. En cliquant sur les liens dans cet exemple va afficher le lien dans une boîte de dialogue d'alerte au lieu de suivre le lien.

Le code HTML:

voici le HTML derrière l'exemple ci-dessus:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

CSS

et la CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

jQuery

et enfin le jQuery qui rend la magie possible:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

ce qu'il fait est quand une ligne est cliquée, une recherche est faite pour le href appartenant à une ancre. Si on en trouve un, l'emplacement de la fenêtre est réglé sur href.

je sais que quelqu'un a écrit à peu près la même chose déjà, mais ma façon est la bonne (div ne peut pas être enfant de A) et aussi il est préférable d'utiliser des classes.

vous pouvez imiter une table en utilisant CSS et faire un élément a la ligne

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

css:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

il y a une bonne façon de le faire techniquement avec <a> tag inside <tr> , qui pourrait être sémantiquement incorrect (pourrait vous donner un avertissement de navigateur), mais fonctionnera avec le no JavaScript/jQuery requis:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS: notez que le truc ici est de mettre <a> comme dernier élément, sinon il va essayer de prendre l'espace de la première cellule <td> .

PPS: maintenant votre ligne entière sera cliquable et vous pouvez utiliser ce lien pour ouvrir dans un nouvel onglet (Ctrl/CMD+clic)

vous pouvez ajouter le rôle de bouton à une rangée de table et Bootstrap changera le curseur sans aucune modification css. J'ai décidé d'utiliser ce rôle comme un moyen de faire facilement une ligne cliquable avec très peu de code.

Html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

Vous pouvez appliquer ce même principe pour ajouter le bouton rôle à n'importe quelle balise.

vous pouvez donner un id à la ligne, par exemple

<tr id="special"> ... </tr>

et ensuite utiliser jquery pour dire quelque chose comme:

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

une option très facile (Fonctionne avec Angular ng-click too):

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

Exemple de travail ici

la réponse acceptée est grande, mais je propose une petite alternative si vous ne voulez pas répéter l'url sur chaque tr. Donc vous mettez l'url ou href dans la table data-url et pas le tr.

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

c'est également bon parce que vous n'avez pas besoin d'ajouter l'attribut de données de clic à chaque tr soit. L'autre bonne chose est que nous n'utilisons pas une classe pour déclencher un clic car les classes ne devraient être utilisées que pour le style.

Voici une autre façon...

the HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

Le jQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});

pourquoi ne pas utiliser de balises" div"....

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>