Estou usando o Bootstrap e o seguinte não funciona:

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

Nota do autor I:

Por favor, olhe para outras respostas abaixo, especialmente aquelas que não usam jquery.

Nota do autor II:

Preservada para a posteridade, mas com certeza a abordagem errada em 2020. (Não era idiomática mesmo em 2017)

Resposta original

Você está usando o Bootstrap, o que significa que está usando o jQuery: ^); portanto, uma maneira de fazer isso é:

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

É claro que você não precisa usar href ou mudar de local; pode fazer o que quiser na função manipulador de cliques. Leia sobre jQuerye como escrever manipuladores;

A vantagem de usar uma classe sobre o ID é que você pode aplicar a solução a várias linhas:

<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 sua base de códigos não muda. O mesmo manipulador cuidaria de todas as linhas.

Outra opção

Você pode usar retornos de chamada do Bootstrap jQuery como este (em um document.readyretorno de chamada):

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

Isso tem a vantagem de não ser redefinido na classificação da tabela (o que acontece com a outra opção).

Nota

Uma vez que este foi publicado, window.document.locationé obsoleto (ou descontinuado, no mínimo) window.location.

Você não pode fazer isso. É HTML inválido. Você não pode colocar um <a>entre a <tbody>e a <tr>. Tente isso:

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

adicionar estilo para a visualização do ponteiro

[data-href] { cursor: pointer; }

Ao trabalhar com isso, você deseja usar o JavaScript para atribuir o manipulador de cliques fora do HTML.

Você pode incluir uma âncora dentro de cada <td>, assim:

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

Você pode usar display:block;as âncoras para tornar a linha completa clicável.

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

Exemplo jsFiddle aqui.

Provavelmente, isso é o melhor possível, a menos que você recorra ao JavaScript.

Uma linha de tabela vinculada é possível, mas não com os <table>elementos padrão . Você pode fazer isso usando as display: tablepropriedades de estilo. Aqui e aqui estão algumas violações para demonstrar.

Este código deve fazer o truque:

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

Observe que as funções do ARIA são necessárias para garantir a acessibilidade adequada, pois os <table>elementos padrão não são usados. Pode ser necessário adicionar funções adicionais, como role="columnheader"se aplicável. Saiba mais no guia aqui.

Conseguido usando o Bootstrap 4.3+ padrão da seguinte maneira - não é necessário jQuery nem nenhuma classe extra de CSS!

A chave é usar stretched-linkno texto dentro da célula e definir <tr>como um bloco contendo.

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

Você pode definir o bloco contendo de maneiras diferentes, por exemplo, definindo transformcomo valor nenhum (como no exemplo acima).

Para mais informações leia aqui está a documentação Bootstrap para stretched-link.

Uma solução muito mais flexível é direcionar qualquer coisa com o atributo data-href. Foi assim que você pode reutilizar o código facilmente em lugares diferentes.

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

Em seu jQuery, basta direcionar qualquer elemento com esse atributo:

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

E não se esqueça de estilizar seu css:

[data-href] {
    cursor: pointer;
}

Agora você pode adicionar o atributo data-href a qualquer elemento e ele funcionará. Quando escrevo trechos como esse, gosto que eles sejam flexíveis. Sinta-se livre para adicionar uma solução vanilla js a isso, se você tiver uma.

Você pode usar este componente de autoinicialização:

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

Jasny Bootstrap

Os componentes ausentes para sua estrutura front-end favorita.

<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

Via atributos de dados

Adicione classe .rowlinke atributo data-link="row"a um <table>ou <tbody>elemento. Para outras opções, adicione o nome aos dados, pois em data-target="a.mainlink"Uma célula pode ser excluída adicionando a .rowlink-skipclasse a <td>.

Via JavaScript

Chame a máscara de entrada via javascript:

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

Existe uma boa maneira de fazer isso tecnicamente com a <a>tag interna <tr>, que pode estar semanticamente incorreta (pode fornecer um aviso ao navegador), mas funcionará sem necessidade de JavaScript/jQuery:

<!-- 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: Observe que o truque aqui é colocar a <a>tag como último elemento, caso contrário, ela tentará ocupar o espaço da primeira <td>célula.

PPS: agora sua linha inteira será clicável e você pode usar este link para abrir também uma nova guia (Ctrl / CMD + clique)

Você pode usar o método javascript onclick em tr e torná-lo clicável, também se precisar criar seu link devido a alguns detalhes, você pode declarar uma função em javascript e chamá-la em onclick, passando alguns valores.

Aqui está uma maneira de colocar um elemento A transparente sobre as linhas da tabela. As vantagens são:

• é um elemento de link real: no ponteiro do mouse sobre alterações, mostra o link de destino na barra de status, pode ser navegado pelo teclado, pode ser aberto em uma nova guia ou janela, o URL pode ser copiado etc.
• a tabela parece a mesma que sem o link adicionado
• nenhuma alteração no próprio código da tabela

Desvantagens:

• o tamanho do elemento A deve ser definido em um script, na criação e após qualquer alteração no tamanho da linha que ele cobre (caso contrário, isso pode ser feito sem JavaScript, o que ainda é possível se o tamanho da tabela também estiver definido em HTML ou CSS)

A tabela permanece como está:

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

Adicione os links (para cada linha) via jQuery JavaScript, inserindo um elemento A em cada primeira coluna e definindo as propriedades necessárias:

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

A configuração de largura e altura pode ser complicada, se forem usados ​​muitos preenchimentos e margens, mas, em geral, alguns pixels de distância não devem importar.

Demonstração ao vivo aqui: http://jsfiddle.net/qo0dx0oo/ (funciona no Firefox, mas não no IE ou no Chrome, o link está posicionado errado)

Corrigido para Chrome e IE (ainda funciona no FF também): http://jsfiddle.net/qo0dx0oo/2/

Você pode adicionar a função de botão a uma linha da tabela e o Bootstrap alterará o cursor sem nenhuma alteração no css. Decidi usar essa função como uma maneira de tornar facilmente qualquer linha clicável com muito pouco código.

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

Você pode aplicar esse mesmo princípio para adicionar a função do botão a qualquer tag.

Este código abaixo tornará sua tabela inteira clicável. Clicar nos links neste exemplo mostrará o link em uma caixa de diálogo de alerta em vez de seguir o link.

O HTML:

Aqui está o HTML por trás do exemplo acima:

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

O CSS

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

O jQuery

E finalmente o jQuery que faz a mágica acontecer:

    $(document).ready(function() {

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

});

O que faz é quando uma linha é clicada, uma pesquisa é feita para o href pertencente a uma âncora. Se um for encontrado, o local da janela é definido para esse href.

Uma opção muito fácil é apenas usar on-click e mais correto, no meu ponto de vista, porque isso separa a view e o controller, e você não precisa codificar a URL ou o que mais precisa realizar com o click . Também funciona com ng-click angular.

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

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

Exemplo trabalhando aqui

Outra opção usando <a>posições CSS, e 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;
}

Então você precisa dar a largura, usando, por exemplo, jQuery:

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

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

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

Eu sei que alguém já escreveu praticamente o mesmo, no entanto, meu caminho é o caminho correto (div não pode ser filho de A) e também é melhor usar classes.

Você pode imitar uma tabela usando CSS e transformar um elemento A na linha

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

eu preferiria usar onclick=""atributo, pois é fácil de usar e entender para iniciantes como

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

Aqui está a solução simples ..

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

A resposta aceita é ótima, mas proponho uma pequena alternativa se você não quiser repetir a URL em cada tr. Então você coloca o url ou href na tabela data-url e não o 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);
    });
});

Isso também é bom porque você também não precisa adicionar o atributo de dados de clique a cada tr. A outra coisa boa é que não estamos usando uma classe para acionar um clique, pois as classes só devem ser realmente usadas para estilizar.

Uma solução que não foi mencionada anteriormente é usar um único link em uma célula e algum CSS para estender esse link pelas células:

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>

Embora a principal solução aqui seja ótima, minha solução elimina a necessidade de aulas. Tudo que você precisa fazer é adicionar o atributo data-href com a URL nele.

Eu investi muito tempo tentando resolver esse problema.

Existem 3 abordagens:

1. Use JavaScript. As desvantagens claras: não é possível abrir uma nova guia nativamente e, ao passar o mouse sobre a linha, não haverá indicação na barra de status, como os links regulares têm. Acessibilidade também é uma questão.

2. Use apenas HTML / CSS. Isso significa colocar <a>aninhados em cada um <td>. Uma abordagem simples como essa rabeca não funciona - porque a superfície clicável não é necessariamente igual para cada coluna. Esta é uma séria preocupação de UX. Além disso, se você precisar de um <button>na linha, não é HTML válido aninha-lo em<a> tag (embora os navegadores estejam de acordo com isso).

   Eu encontrei três outras maneiras de implementar essa abordagem. Primeiro está tudo bem, os outros dois não são ótimos.

   a) Veja este exemplo :

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

   Funciona, mas devido a inconsistências entre o Chrome e o Firefox, é necessário um hack específico do navegador para superar as diferenças. Além disso, o Chrome sempre alinha o conteúdo da célula ao topo, o que pode causar problemas com textos longos, especialmente se houver alturas de linha variadas.

   b) Configurando <td>para{ display: contents; } . Isso leva a 2 outros problemas:

   b1 Se alguém tentar estilizar diretamente a <td>tag, como configurá-la { width: 20px; }, precisamos passar esse estilo de alguma forma para o<a> tag. Precisamos de alguma mágica para fazer isso, provavelmente mais mágica do que na alternativa Javascript.

   b2 { display: contents; }ainda é experimental; especificamente, não é suportado no Edge.

   c) Configurando <td>para { height: --some-fixed-value; }. Isso simplesmente não é flexível o suficiente.

3. A última abordagem, que eu recomendo pensar seriamente, é não usar linhas clicáveis . Linhas clicáveis ​​não são uma ótima experiência de experiência do usuário: não é fácil marcá-las visualmente como clicáveis ​​e apresenta desafios quando várias partes são clicáveis ​​nas linhas, como botões. Portanto, uma alternativa viável poderia ser ter uma <a>tag apenas na primeira coluna, exibida como um link regular, e atribuir a ela o papel de navegar por toda a linha.

Aqui está outra maneira ...

O HTML:

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

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

Substitua # pelo URL, tabindex="0"torne qualquer elemento focalizável

Você pode dar um ID à linha, por exemplo

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

e então use jquery para dizer algo como:

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

Por que não devemos usar as tags "div" ....

<div>

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

</div>