html - linha da tabela como um link


101

Não consigo definir a linha da minha tabela como link para algo. Posso usar apenas css e html. Eu tentei coisas diferentes de div in row para algo outro, mas ainda não consigo fazer funcionar.

Respostas:


175

Você tem duas maneiras de fazer isso:

  • Usando javascript:

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

  • Usando âncoras:

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

Eu fiz o segundo trabalho usando:

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

Para se livrar do espaço morto entre as colunas:

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

Aqui está uma demonstração simples do segundo exemplo: DEMO


8
Como OP disse "apenas css e html", presumo que aceitar foi para a segunda resposta. Observe que se você não tiver border = 0, obterá uma lacuna de "elo perdido" entre as células da tabela.
PAUSA do sistema em

1
IIRC as células da tabela apenas precisam ser recolhidas, mas podem ter uma borda.
Esteban Küber,

5
A tag <a> não permite nenhum outro elemento html dentro dela. Então, como podemos vincular uma linha inteira da tabela com mais dados da tabela? Algo assim: <tr> <a href=""> <td>Text</td> <td> ..... </a> </tr> .. Não podemos ter assim ne?
Abimaran Kugathasan de

4
Eu recomendaria usar "display: inline-block" em vez de block. Com a exibição de blocos, descobri que o Chrome estava ignorando a "altura: 100%" e não tornando a altura total do <td> clicável se houver outros itens na mesma linha que tenham uma altura maior. Torná-lo inline-block corrigiu esse problema e também um problema possivelmente relacionado com o texto sendo cortado dentro dos elementos da tabela.
09 de

2
Âncoras ainda tem espaço morto entre as colunas (testado com Google Chrome Versão 40.0.2214.115 m)
Yuri

55

Eu criei uma função jquery personalizada:

Html

<tr data-href="site.com/whatever">

jQuery

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

Fácil e perfeito para mim. Espero que ajude você.

(Eu sei que OP quer CSS e HTML apenas, mas considere jQuery)

Editar

Acordado com Matt Kantor usando dados Attr. Resposta editada acima


Isso é muito elegante, na verdade. Eu me pergunto se ele é considerado html inválido pelos padrões w3c.
Mahn

14
Eu usaria data-hrefou algo assim.
Matt Kantor

2
O link JSFiddle leva a 404.
Flox

1
adicione classe <table class='tr_link' >e dê .tr_link{cursor:pointer}em css para melhor uso.
Bagova

6
Para adicionar o efeito de mão ao pairar, adicione tr[data-href] { cursor: pointer }às suas folhas de estilo
OverCoder

27

Se você estiver em um navegador compatível, poderá usar CSS para transformar o <a>em uma linha de tabela:

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

Claro, você está limitado a não colocar elementos de bloco dentro do <a>. Você também não pode misturar isso com um normal<table>


1
Ótima ideia, obrigado! Parece funcionar no Opera 8.5 / , Firefox 0.8 / , IE8, iPhone Simulator / Safari / muito antigo :)
biziclop

1
Esta deve ser a técnica que os desenvolvedores tentam adotar, visto que as tabelas CSS são suportadas por todos os navegadores atuais: caniuse.com/#feat=css-table O único problema é que não consigo usar isso com o Bootstrap! : '(
shangxiao

13

Se você tiver que usar uma tabela, pode colocar um link em cada célula da tabela:

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

E faça com que os links preencham todas as células:

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

Se você puder usar <div>s em vez de uma tabela, seu HTML pode ser muito mais simples e você não obterá "lacunas" nos links, entre as células da tabela:

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

Aqui está o CSS que acompanha o <div>método:

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

1
Se você quiser mostrar dados tabulares, sempre use uma tabela. Usar uma coleção de divs e spans é semanticamente incorreto, tornará seu conteúdo difícil de ler se você perder o CSS e inacessível para quem usa um leitor de tela.
gulima

12

A maneira usual é atribuir algum JavaScript ao onClickatributo do TRelemento.

Se você não pode usar JavaScript, deve usar um truque:

  1. Adicione o mesmo link a cada uma TDdas mesmas linhas (o link deve ser o elemento mais externo da célula).

  2. Transforme links em elementos de bloco: a { display: block; width: 100%; height: 100%; }

O último forçará o link a preencher toda a célula, portanto, clicar em qualquer lugar invocará o link.


7

Você não pode envolver um <td>elemento com uma <a>tag, mas pode realizar uma funcionalidade semelhante usando o onclickevento para chamar uma função. Um exemplo é encontrado aqui , algo como esta função:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

E adicione-o à sua mesa assim:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

21
Um dos problemas de usar onClick para esse tipo de finalidade é que os usuários não podem mais usar o botão do meio do mouse ou clicar em Control para abrir links em uma nova guia (o que pode ser realmente frustrante para aqueles que amam abrir links dessa maneira) . Por outro lado, não há razão para complicar as coisas criando uma função que executa apenas um comando simples. Se você vai fazer isso, basta colocar "document.location.href = ..." diretamente no atributo onclick.
ou

7

A resposta de sirwilliam me cabe melhor Melhorei o Javascript com suporte para tecla de atalho Ctrl + LeftClick (abre página em nova aba). O evento ctrlKeyé usado por PCs, metaKeypor 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;
    }
});

Exemplo

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/


Boa. Ctrl + LeftClick não quebra UIX
Yuri

1
Ainda perdendo 'clique com o botão direito -> abrir em uma nova guia' ou 'abrir em uma nova janela'
JGInternational

4

Sei que esta pergunta já foi respondida, mas ainda não gosto de nenhuma solução nesta página. Para as pessoas que usam JQuery, fiz uma solução final que permite dar à linha da tabela quase o mesmo comportamento da <a>tag.

Esta é a minha solução:

jQuery Você pode adicionar isso, por exemplo, a um arquivo javascript incluído padrão

$('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 Agora você pode usar isso em qualquer <tr>elemento dentro do seu HTML

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

Tão perto de puro js. document.querySelector('tr[url]').addEventListener("mousedown", function(e){ var click = e.which; var url = this.getAttribute("url"); if(url){ if(click == 1){ window.location.href = url; } else if(click == 2){ window.open(url, '_blank'); window.focus(); } return true; } });
Ramon Bakker

1
Em 2014, isso não estava disponível no vanilla js , seu pirralho mimado; P.
botenvouwer de

2

Quando quero simular um <tr>com um link mas respeitando os padrões html, faço isso.

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*/
}

Desta forma, quando alguém passa com o mouse em um TR, toda a linha (e esses links) fica com o estilo pairar e ele não consegue ver que existem vários links.

Espero que possa ajudar alguém.

Fiddle AQUI


1

Isso evita que você duplique o link no tr - apenas pesque-o no primeiro a.

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

0
//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Algo nesse sentido, talvez? Embora use JS, mas essa é a única maneira de tornar uma linha (tr) clicável.

A menos que você tenha uma única célula com uma marca de âncora que preencha toda a célula.

E então, você não deveria usar uma mesa de qualquer maneira.


0

Depois de ler este tópico e alguns outros, descobri a seguinte solução em 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"));

Para usá-lo colocar o href em tr / td / th que você deseja ser clicável como: <tr href="http://stackoverflow.com">. E certifique-se de que o script acima seja executado após o elemento tr ser criado (por sua colocação ou usando manipuladores de eventos).

A desvantagem é que isso não fará com que os TRs se comportem totalmente como links como divs com display: table;, e eles não serão selecionáveis ​​pelo teclado ou terão texto de status. Edit: Eu fiz a navegação do teclado funcionar definindo onkeydown, role e tabIndex, você poderia remover essa parte se apenas o mouse fosse necessário. Eles não mostrarão a URL na barra de status ao passar o mouse.

Você pode estilizar especificamente o link TRs com o seletor CSS "tr [href]".


0

Eu tenho outro jeito. Especialmente se você precisar postar dados usando 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 configura variáveis ​​em SESSIONS nas quais a página que você está indo pode ler e agir.

Eu realmente gostaria de uma forma de postar direto para um local de janela, mas não acho que seja possível.


0

Obrigado por isso. Você pode alterar o ícone de foco atribuindo uma classe CSS à linha como:

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

e o CSS se parece com:

<style>
    .pointer { cursor: pointer; }
</style>

-2

Você pode adicionar uma tag A à linha?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

É isso que você está perguntando?


1
Não, preciso clicar em todas as áreas da linha.
Max Frai,
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.