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>
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>
Respostas:
Por favor, olhe para outras respostas abaixo, especialmente aquelas que não usam jquery.
Preservada para a posteridade, mas com certeza a abordagem errada em 2020. (Não era idiomática mesmo em 2017)
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 jQuery
e 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.
Você pode usar retornos de chamada do Bootstrap jQuery como este (em um document.ready
retorno 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).
Uma vez que este foi publicado, window.document.location
é obsoleto (ou descontinuado, no mínimo) window.location
.
href
atributo 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')
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 href
já que essa é a especificação para dados personalizados. data-url
e jQuery vai acessá-lo como$(this).data(url);
a
tag display: block;
dentro de cada célula é um pouco chato, mas parece a maneira mais útil de resolver esse problema.
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.
<a>
dentro da linha clicada. (que também degrada graciosamente)
onClick={() => window.open('https://stackoverflow.com/', '_blank')}
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;
}
Provavelmente, isso é o melhor possível, a menos que você recorra ao JavaScript.
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-within
pseudo classe CSS.
Uma linha de tabela vinculada é possível, mas não com os <table>
elementos padrão . Você pode fazer isso usando as display: table
propriedades 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.
/
chave no Firefox), navegação ( tab
chave), 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>
.
_tables.scss
e 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 .
<table>
existe por um motivo. Mas isso ainda bate qualquer solução javascript :)
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-link
no 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 transform
como valor nenhum (como no exemplo acima).
Para mais informações leia aqui está a documentação Bootstrap para stretched-link
.
scope="row"
? Eu não uso o escopo e a linha ainda se comporta como um link.
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 :-)
tr
marca que não é reconhecida como as regras para o bloco que contém os navegadores ... stackoverflow.com/questions/61342248/…
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
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>
Adicione classe .rowlink
e 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-skip
classe a <td>
.
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)
<tr>
elementos não podem ter um <a>
elemento quando criança. Filhos únicos <td>
e <th>
válidos. Veja: stackoverflow.com/questions/12634715/…
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:
Desvantagens:
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/
onmouseover
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> </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;}
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:
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.
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.
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";
});
});
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>