Sto usando Bootstrap e il seguente non funziona:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

Nota dell'autore I:

Si prega di guardare altre risposte di seguito, in particolare quelle che non usano jquery.

Nota dell'autore II:

Conservato per i posteri, ma sicuramente l' approccio sbagliato nel 2020. (Era non idiomatico anche nel 2017)

Risposta originale

Stai usando Bootstrap, il che significa che stai usando jQuery: ^), quindi un modo per farlo è:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

Ovviamente non devi usare href o cambiare posizione, puoi fare quello che vuoi nella funzione del gestore di clic. Continua a leggere jQuerye come scrivere i gestori;

Il vantaggio di utilizzare una classe su ID è che puoi applicare la soluzione a più righe:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

e la tua base di codice non cambia. Lo stesso gestore si occuperebbe di tutte le file.

Un'altra opzione

È possibile utilizzare i callback Bootstrap jQuery in questo modo (in un document.readycallback):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

Ciò ha il vantaggio di non essere ripristinato al momento dell'ordinamento delle tabelle (cosa che accade con l'altra opzione).

Nota

Poiché questo è stato pubblicato window.document.locationè invece obsoleto (o almeno deprecato) window.location.

Non puoi farlo. È HTML non valido. Non puoi inserire un intervallo <a>tra a <tbody>e a <tr>. Prova questo invece:

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

aggiungi stile per la vista del puntatore

[data-href] { cursor: pointer; }

Quando si lavora su di esso, si desidera utilizzare JavaScript per assegnare il gestore di clic al di fuori dell'HTML.

Puoi includere un'ancora all'interno di ogni <td>, in questo modo:

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

È quindi possibile utilizzare display:block;gli ancoraggi per rendere selezionabile l'intera riga.

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

Esempio jsFiddle qui.

Questo è probabilmente ottimale quanto lo otterrai a meno che non ricorra a JavaScript.

Una riga di tabella collegata è possibile, ma non con gli <table>elementi standard . Puoi farlo usando le display: tableproprietà dello stile. Qui e qui ci sono alcuni violini da dimostrare.

Questo codice dovrebbe fare il trucco:

.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 role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

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

Si noti che i ruoli ARIA sono necessari per garantire la corretta accessibilità poiché gli <table>elementi standard non vengono utilizzati. Potrebbe essere necessario aggiungere ruoli aggiuntivi come role="columnheader"se applicabile. Scopri di più sulla guida qui.

Ottenuto usando Bootstrap standard 4.3+ come segue: non sono necessarie jQuery né classi css extra!

La chiave è usare stretched-linkil testo all'interno della cella e definire <tr>come un blocco contenitore.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

È possibile definire il blocco di contenimento in diversi modi, ad esempio impostando transformsu nessun valore (come nell'esempio sopra).

Per maggiori informazioni leggi la documentazione di Bootstrap per stretched-link.

Una soluzione molto più flessibile è indirizzare qualsiasi cosa con l'attributo data-href. Questo è stato possibile riutilizzare facilmente il codice in luoghi diversi.

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

Quindi nel tuo jQuery scegli come target qualsiasi elemento con quell'attributo:

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

E non dimenticare di dare uno stile al tuo css:

[data-href] {
    cursor: pointer;
}

Ora puoi aggiungere l'attributo data-href a qualsiasi elemento e funzionerà. Quando scrivo frammenti come questo mi piace che siano flessibili. Sentiti libero di aggiungere una soluzione js alla vaniglia se ne hai una.

È possibile utilizzare questo componente bootstrap:

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

Jasny Bootstrap

I componenti mancanti per il tuo framework front-end preferito.

<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>

uso

Tramite attributi di dati

Aggiungi classe .rowlinke attributo data-link="row"a a <table>o <tbody>elemento. Per altre opzioni aggiungi il nome ai dati, come in data-target="a.mainlink"Una cella può essere escluso aggiungendo la .rowlink-skipclasse a<td> .

Tramite JavaScript

Chiama la maschera di input tramite javascript:

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

C'è un bel modo di farlo tecnicamente con il <a>tag all'interno <tr>, che potrebbe essere semanticamente errato (potrebbe darti un avviso del browser), ma funzionerà senza JavaScript/jQuerynecessità:

<!-- 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: nota che il trucco qui è mettere il <a>tag come ultimo elemento, altrimenti proverà a occupare lo spazio della prima <td>cella.

PPS: ora sarà possibile fare clic su tutta la riga e puoi utilizzare questo link per aprire anche in una nuova scheda (Ctrl / CMD + clic)

Puoi usare il metodo javascript onclick in tr e renderlo cliccabile, anche se hai bisogno di costruire il tuo link a causa di alcuni dettagli puoi dichiarare una funzione in javascript e chiamarla in onclick, passando alcuni valori.

Ecco un modo mettendo un elemento A trasparente sopra le righe della tabella. I vantaggi sono:

• è un vero elemento di collegamento: al passaggio del mouse cambia puntatore, mostra il collegamento di destinazione nella barra di stato, può essere navigato da tastiera, può essere aperto in una nuova scheda o finestra, l'URL può essere copiato, ecc.
• la tabella è identica a quella senza il collegamento aggiunto
• nessuna modifica nel codice della tabella stessa

svantaggi:

• la dimensione dell'elemento A deve essere impostata in uno script, sia al momento della creazione sia dopo eventuali modifiche alla dimensione della riga coperta (altrimenti potrebbe essere eseguita senza JavaScript, il che è ancora possibile se è impostata anche la dimensione della tabella in HTML o CSS)

La tabella rimane così com'è:

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

Aggiungi i collegamenti (per ogni riga) tramite JavaScript jQuery inserendo un elemento A in ogni prima colonna e impostando le proprietà necessarie:

// 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)
        ;
    });

L'impostazione della larghezza e dell'altezza può essere complicata, se vengono utilizzati molti rilievi e margini, ma in generale alcuni pixel non devono nemmeno importare.

Demo live qui: http://jsfiddle.net/qo0dx0oo/ (funziona con Firefox, ma non con IE o Chrome, il link è posizionato in modo errato)

Risolto per Chrome e IE (funziona ancora anche in FF): http://jsfiddle.net/qo0dx0oo/2/

È possibile aggiungere il ruolo del pulsante a una riga della tabella e Bootstrap cambierà il cursore senza alcuna modifica CSS. Ho deciso di utilizzare quel ruolo come modo per rendere facilmente selezionabile qualsiasi riga con pochissimo codice.

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");
     });
});

Puoi applicare questo stesso principio per aggiungere il ruolo pulsante a qualsiasi tag.

Ecco una soluzione semplice ..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

Questo codice seguente renderà selezionabile l'intera tabella. Facendo clic sui collegamenti in questo esempio verrà mostrato il collegamento in una finestra di avviso invece di seguire il collegamento.

HTML:

Ecco l'HTML dietro l'esempio sopra:

    <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>

Il CSS

E il 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;
}

Il jQuery

E infine il jQuery che rende possibile la magia:

    $(document).ready(function() {

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

});

Ciò che fa è quando si fa clic su una riga, viene eseguita una ricerca dell'href appartenente a un'ancora. Se ne viene trovato uno, la posizione della finestra viene impostata su tale href.

Un'opzione molto semplice è semplicemente usare con un clic e più corretta, dal mio punto di vista, perché separa la vista e il controller e non è necessario codificare l'URL o qualsiasi altra cosa che si debba fare con il clic . Funziona anche con Angular ng-click.

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

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

Esemplare lavora qui

Un'altra opzione che utilizza un <a>, posizioni CSS e alcuni jQuery o 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;
}

Quindi devi dare una larghezza, usando ad esempio jQuery:

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

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

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

So che qualcuno ha già scritto più o meno la stessa cosa, tuttavia il mio modo è il modo corretto (div non può essere figlio di A) ed è anche meglio usare le classi.

Puoi imitare una tabella usando CSS e rendere un elemento A la riga

<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;}

Preferirei usare l' onclick=""attributo in quanto è facile da usare e da capire per i neofiti

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>

La risposta accettata è ottima, ma propongo una piccola alternativa se non vuoi ripetere l'URL su ogni tr. Quindi inserisci l'URL o l'HREF nella tabella data-url e non nel 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);
    });
});

Questo è utile anche perché non è necessario aggiungere l'attributo dei dati sui clic a ogni tr. L'altra cosa positiva è che non stiamo usando una classe per innescare un clic poiché le classi dovrebbero davvero essere usate solo per lo stile.

Una soluzione che non è stata menzionata in precedenza è quella di utilizzare un singolo collegamento in una cella e alcuni CSS per estendere questo collegamento sulle celle:

table {
  border: 1px solid;
  width: 400px;
  overflow: hidden;
}

tr:hover {
  background: gray;
}

tr td {
  border: 1px solid;
}

tr td:first-child {
  position:relative;
}

a:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 400px;
}

<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

Mentre la soluzione principale qui è eccezionale, la mia soluzione elimina la necessità di lezioni. Tutto quello che devi fare è aggiungere l'attributo data-href con l'URL al suo interno.

Ho investito molto tempo nel tentativo di risolvere questo problema.

Esistono 3 approcci:

1. Usa JavaScript. Gli svantaggi chiari: non è possibile aprire una nuova scheda in modo nativo e quando si passa sopra la riga non ci sarà alcuna indicazione sulla barra di stato come hanno i normali collegamenti. Anche l'accessibilità è una domanda.

2. Usa solo HTML / CSS. Questo significa mettere <a>nidificati sotto ciascuno <td>. Un approccio semplice come questo violino non funziona, perché la superficie cliccabile non è necessariamente uguale per ogni colonna. Questa è una seria preoccupazione per la UX. Inoltre, se hai bisogno di un <button>sulla riga, non è un codice HTML valido annidarlo sotto il <a>tag (anche se i browser sono d'accordo).

   Ho trovato altri 3 modi per implementare questo approccio. Il primo è ok, gli altri due non sono fantastici.

   a) Dai un'occhiata a questo esempio :

   tr {
     height: 0;
   }
   
   td {
     height: 0;
     padding: 0;
   }
   
   /* A hack to overcome differences between Chrome and Firefox */
   @-moz-document url-prefix() {
     td {
       height: 100%;
     }
   }
   
   a {
     display: block;
     height: 100%;
   }

   Funziona, ma a causa delle incoerenze tra Chrome e Firefox richiede un hack specifico del browser per superare le differenze. Inoltre Chrome allineerà sempre il contenuto della cella verso l'alto, il che può causare problemi con testi lunghi, specialmente se sono coinvolte diverse altezze di linea.

   b) Impostazione <td>su { display: contents; }. Questo porta ad altri 2 problemi:

   b1. Se qualcun altro prova a modellare direttamente il <td>tag, come impostandolo su { width: 20px; }, dobbiamo in qualche modo passare quello stile al <a>tag. Abbiamo bisogno di un po 'di magia per farlo, probabilmente più magia che in alternativa a Javascript.

   b2. { display: contents; }è ancora sperimentale; in particolare non è supportato su Edge.

   c) Impostazione <td>su { height: --some-fixed-value; }. Questo non è abbastanza flessibile.

3. L'ultimo approccio, che raccomando di pensare seriamente, è di non usare affatto le file cliccabili . Le righe cliccabili non sono una grande esperienza UX: non è facile contrassegnarle visivamente come cliccabili, e pone delle sfide quando più parti sono cliccabili all'interno delle righe, come i pulsanti. Quindi una valida alternativa potrebbe essere quella di avere un<a> tag solo sulla prima colonna, visualizzato come un normale link, e dargli il ruolo di navigare nell'intera riga.

Ecco un altro modo ...

HTML:

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

Il jQuery:

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

      });

});

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Sostituisci # con l'URL, tabindex="0"rende qualsiasi elemento focalizzabile

Potresti dare alla riga un ID, ad es

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

e poi usa jquery per dire qualcosa del tipo:

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

Perché non dovremmo usare i tag "div" ...

<div>

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

</div>