como tornar uma linha inteira em uma tabela clicável como um link?


436

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>

2
JavaScript pode ser melhor para este
John Conde

1
Ele está usando inicialização, então eu acho que ele deve ser capaz de fazê-lo :)
Ahmed Masud

Que tal colocar um elemento A transparente antes da linha? Dessa forma, ele teria todas as propriedades de um link real (barra de status, clique no meio, etc ...) e também não alteraria a aparência da tabela (se desejado).
David Balažic


Respostas:


568

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.


105
Você também pode alterar o cursor com o css: tr.clickableRow {cursor: pointer; }
Winston Kotzan 30/10

78
Só queria acrescentar que você não deve usar o hrefatributo a tr, pois não é um atributo válido para este elemento. Use atributos de dados: data-url="{linkurl}"e no código js:$(this).data('url')
Maksim Vi.

12
Você pode evitar o uso de uma classe em cada linha e decorar a tabela com um nome de classe clickable_row(CamelCase é contra os padrões HTML e deve estar em letras minúsculas (tive problemas com vários navegadores algumas vezes com isso)) e o jQuery é $('.clickable_row tr').click(function ...But realmente você deve usar data-para armazenar dados, em vez de hrefjá que essa é a especificação para dados personalizados. data-urle jQuery vai acessá-lo como$(this).data(url);
Piotr Kula

3
FYI: Se você puder, deixe um link em algum lugar no tr para pessoas com o Javascript desativado.
Hitautodestruct

47
Não é um grande fã desta solução, porque os usuários não veem o URL do link na parte inferior do navegador ao passar o mouse e, mais importante, não podem clicar com o botão da roda no link para abri-lo em uma nova guia. Inserir uma atag display: block;dentro de cada célula é um pouco chato, mas parece a maneira mais útil de resolver esse problema.
Maxime Rossini

222

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.


3
@ Aquillo, o OP, afirma especificamente que ele está usando o bootstrap. assim uma solução jQuery seria melhor no quadro
Ahmed Masud

39
@AhmedMasud Nesse caso, sim. Embora para futuros leitores o JS simples possa ser uma solução melhor. Como esse é o objetivo do Stackoverflow, ainda considero meu comentário válido.
Menno

3
A separação de comportamento e marcação é certamente a preferida. Se alguma coisa, eu diria que href não é um atributo válido em um tr. Ele deve ser substituído por um data-href e substitua $ (this) .attr por $ (this) .data.
Davidfurber

1
Ou você pode fazer com que a abordagem de associação de eventos da classe ".clickableRow" procure a primeira <a>dentro da linha clicada. (que também degrada graciosamente)
Jason Sperske

3
Se você estiver usando a sintaxe do ES6, é possível executar o link da seguinte forma:onClick={() => window.open('https://stackoverflow.com/', '_blank')}
Louie Bertoncin

186

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.


11
Esta é a melhor solução, sem jquery, sem javascript, apenas CSS, ou seja, meu link pode ser diferente, não href, com vários parâmetros como <a4j: commandLink />, portanto, mantenho-o e altero apenas o estilo. Muito Obrigado.
TiyebM 14/02

4
@ Daniel boa resposta, mas Se a célula se estende para baixo, não funciona corretamente como esta jsfiddle.net/RFFy9/253
midstack

4
Ótimo! Esta solução permite abrir o link em uma nova guia, se o usuário desejar. Mas colunas vazias não terão links.
Ignacio Pérez

9
@AnnaRouben Vou ter que discordar: ter vários links semelhantes é uma desvantagem muito pequena em comparação com as vantagens (funciona sem JS, o leitor de tela pode ler para onde o link está levando, pode clicar com a tecla Ctrl para abrir em uma nova guia. ..) As soluções de HTML puro funcionam quase sempre melhor em software assistencial do que as soluções JS.
JJJ 01/02

6
Eu gosto desta solução devido à sua acessibilidade. Os usuários podem navegar pelos links, além de poder abrir links em novas guias. O que eu fiz no meu aplicativo é colocar tabindex="-1"tudo, exceto o primeiro <td>link, para que o usuário tabule linha por linha, não célula por célula. Além disso, você ainda pode destacar / delinear a linha inteira se desejar usar a :focus-withinpseudo classe CSS.
Jonathan

89

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.


13
Agora tente aplicar o plugin dataTables a este! :)
Afonso Gomes

7
Esta é a resposta correta IMHO, porque mantém todas as ferramentas do agente do usuário relacionadas aos links: pesquisa (por exemplo, /chave no Firefox), navegação ( tabchave), localização do link de cópia, abrir em uma nova aba / janela, etc. mesmo para acessíveis / especiais precisa de navegadores. Meu único argumento é que eu não aninharia um <div>dentro de um <a>, para que as células fiquem melhor marcadas como <span>.
Tobia

A aplicação de plugins e bibliotecas de terceiros a essas tabelas CSS pode envolver um pouco mais de trabalho, mas geralmente é copiar e colar e substituir. Por exemplo, eu apenas dupliquei o próprio Bootstrap _tables.scsse algumas outras partes aleatórias, substituindo todas as ocorrências de elementos da tabela pelas classes CSS que eu escolhi usar (que são simplesmente as mesmas que os elementos: th.th) Não há muito trabalho comparado aos benefícios, realmente .
Tobia

2
Boa resposta, mas isso é apenas uma solução se a tabela foi usada apenas para o alinhamento adequado (o que é o caso em muitas situações!). Para dados tabulares, a semântica <table>existe por um motivo. Mas isso ainda bate qualquer solução javascript :)
Marten Koetsier

Embora essa seja uma solução muito inteligente, é exatamente isso. Na verdade, não é uma tabela e, como o autor menciona, apresentará problemas de acessibilidade. Muito provavelmente, causará problemas com outras coisas que estão esperando uma tabela, mas estão recebendo uma.
Tyson Gibby

25

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.


1
Esta resposta merece mais voto. Nenhum javascript. E para que é isso scope="row"? Eu não uso o escopo e a linha ainda se comporta como um link.
Christhofer Natalius 20/12/19

@ChristhoferNatalius thanks! Minha resposta original não continha o scope="row"- verifique o histórico se você quiser ver o que mais pode ter sido editado. No entanto, não reverti as edições, pois o trecho de código parece funcionar (assim como o original) e não tive a chance de testar exaustivamente o novo código :-)
Krishna Gupta

A desvantagem disso é que o link estará no topo das colunas, você não poderá copiar o texto e o título do atributo em td não será exibido se passar o mouse. Infelizmente, tenho que voltar ao modo antigo, colocar o link apenas em uma coluna.
Christhofer Natalius

2
Gostei dessa solução, mas, infelizmente, não é compatível com vários navegadores (o Chrome / Firefox está bom, mas não o Safari). O problema ocorre devido à trmarca que não é reconhecida como as regras para o bloco que contém os navegadores ... stackoverflow.com/questions/61342248/…
pom421

17

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.


bom trabalho com o css
Amirhossein Tarmast

Minha solução favorita. Bem feito 👍🏽
MFrazier 07/11/19

7

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

6

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)


Isso não é basicamente o mesmo que a minha resposta ?
David Balažic

Embora essas respostas pareçam perfeitas, na verdade não funciona, porque os <tr>elementos não podem ter um <a>elemento quando criança. Filhos únicos <td>e <th>válidos. Veja: stackoverflow.com/questions/12634715/…
funkybunky

5

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.


5

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/


2
Solução inteligente. Descobri que criar o elemento preguiçosamente, apenas uma vez que a linha é suspensa, trouxe um grande aumento de desempenho para grandes tabelas.
levi

1
@ Levi você pode dar algum feedback sobre como preguiçoso carregar isso?
Subliminal Hash

@KemalEmin eu diria que ele usaria javascript'sonmouseover
brad

5

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.


uau, na verdade, ele trabalhou com ui-sref em vez de data-href sem o código jquery. precisa apenas mudar o cursor para o dedo.
Nurp 17/07/19

isso funcionou perfeitamente graças a uma tonelada
Ashish Banerjee

4

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.


4

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


1
Certamente esta é a resposta correta. Os outros são loucamente complexos para uma coisa tão simples. Se você quiser alterar o ponteiro do mouse, adicione tr: hover {cursor: pointer; } para sua classe CSS
Tom Close

1
@TomClose Dependendo do que você deseja que a linha clique faça, isso pode ser problemático, por exemplo, a navegação não funcionará normalmente - sem cliques de turno para abrir em uma nova guia / janela, sem passar o mouse para ver o destino, etc.
NetMage

3

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

3

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

3

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>

3

Aqui está a solução simples ..

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

2

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.


2

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>


Isso parece bastante elegante. MAS a demonstração do link do google não funciona. Stackoverflow um faz. Provavelmente apenas o Google está sendo burro, como costumam ser. Talvez link para o Bing :-) Serve certo. De qualquer forma v solução agradável e arrumado.
BeNice

Isso funciona comigo !! Ótima solução. Uma coisa a notar é que a largura para a: before deve ser longa o suficiente para cobrir a mesa.
08 de

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


1

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.


0

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

      });

});

Como podemos abri-lo em uma nova guia? @klewis
Khushbu Vaghela

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


-1

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


1
Acredito que você queira usar a classe em vez do id porque provavelmente terá várias linhas e o id deve ser usado apenas para um item.
ProgramaçãoJul

-11

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

<div>

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

</div>

1
você deve melhorar a sua resposta com display css: Tabela
m1crdy

Melhore a resposta adicionando css
Prathamesh Mais 6/01
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.