html - sirve - ¿Cómo hacer que una fila entera en una tabla se pueda hacer clic como enlace?
tabla responsive html (18)
Estoy usando Bootstrap y lo siguiente no funciona:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
¿Por qué no deberíamos usar etiquetas "div" ....
<div>
<a href="" > <div> Table row of content here.. </div> </a>
</div>
Aquí hay otra manera ...
El HTML:
<table>
<tbody>
<tr class=''clickableRow''>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
</table>
La jQuery:
$(function() {
$(".clickableRow").on("click", function() {
location.href="http://google.com";
});
});
Aquí hay una forma de colocar un elemento A transparente sobre las filas de la tabla. Las ventajas son:
- es un elemento de enlace real: al desplazar el puntero cambia, muestra el enlace de destino en la barra de estado, se puede navegar por el teclado, se puede abrir en una nueva pestaña o ventana, se puede copiar la URL, etc.
- La tabla se ve igual que sin el enlace agregado.
- no hay cambios en el código de la tabla
Desventajas:
- el tamaño del elemento A debe establecerse en un script, tanto en la creación como después de cualquier cambio en el tamaño de la fila que cubre (de lo contrario, se podría hacer sin JavaScript, lo cual es posible si el tamaño de la tabla también está configurado en HTML o CSS)
La mesa se queda como está:
<table id="tab1">
<tbody>
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</tbody>
</table>
Agregue los enlaces (para cada fila) a través de JavaScript jQuery insertando un elemento A en cada primera columna y configurando las propiedades necesarias:
// 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)
;
});
La configuración del ancho y la altura puede ser complicada, si se usan muchos rellenos y márgenes, pero en general, algunos píxeles desactivados no deberían importar.
Demostración en vivo aquí: http://jsfiddle.net/qo0dx0oo/ (funciona en Firefox, pero no en IE o Chrome, el enlace está mal posicionado)
Corregido para Chrome e IE (también funciona en FF también): http://jsfiddle.net/qo0dx0oo/2/
El siguiente código hará que se pueda hacer clic en toda la tabla. Al hacer clic en los enlaces de este ejemplo, se mostrará el enlace en un diálogo de alerta en lugar de seguir el enlace.
El HTML:
Aquí está el HTML detrás del ejemplo anterior:
<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>
El CSS
Y el 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;
}
La jQuery
Y finalmente el jQuery que hace que la magia suceda:
$(document).ready(function() {
$(''#example tr'').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
Lo que hace es cuando se hace clic en una fila, se realiza una búsqueda para el href que pertenece a un ancla. Si se encuentra uno, la ubicación de la ventana se establece en ese href.
Estás usando Bootstrap, lo que significa que estás usando jQuery: ^), por lo que una forma de hacerlo es:
<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");
});
});
Por supuesto, no tiene que usar href o cambiar de ubicación, puede hacer lo que quiera en la función de control de clic. Lea sobre jQuery y cómo escribir controladores;
La ventaja de usar una clase sobre id es que puede aplicar la solución a varias filas:
<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>
y su base de código no cambia. El mismo manejador se haría cargo de todas las filas.
Otra opción
Puede utilizar las devoluciones de llamada de Bootstrap jQuery de esta manera (en una devolución de llamada document.ready ):
$("#container").on(''click-row.bs.table'', function (e, row, $element) {
window.location = $element.data(''href'');
});
Esto tiene la ventaja de no restablecerse en la clasificación de tablas (lo que sucede con la otra opción).
Nota
Desde que se publicó window.document.location está obsoleto (o se ha desaprobado por lo menos), use window.location lugar.
Existe una buena manera de hacerlo técnicamente con la etiqueta <a> dentro de <tr> , que podría ser semánticamente incorrecta (podría darle una advertencia del navegador), pero funcionará sin necesidad 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'';
}
PD: Note que el truco aquí es poner la etiqueta <a> como último elemento, de lo contrario, intentará tomar el espacio de la primera celda <td> .
PPS: Ahora podrá hacer clic en toda su fila y también puede usar este enlace para abrir en una nueva pestaña (Ctrl / CMD + clic)
La respuesta aceptada es excelente, pero propongo una pequeña alternativa si no desea repetir la URL en cada tr. Así que pones la url o href en la tabla data-url y no la 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);
});
});
Esto también es bueno porque tampoco es necesario agregar el atributo de datos de clic a cada tr. La otra cosa buena es que no estamos usando una clase para activar un clic, ya que las clases solo deberían usarse para el estilo.
No puedes hacer eso. No es válido HTML. No puede poner un <a> entre un <tbody> y un <tr> . Intenta esto en su lugar:
<tr onclick="window.location=''#'';">
...
</tr>
Cuando trabaje para ello, desearía usar JavaScript para asignar el controlador de clic fuera del HTML.
Otra opción que usa una <a> , posiciones CSS y algo de 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;
}
Entonces necesitas dar un ancho, usando por ejemplo jQuery:
$(function () {
var $table = $(''table'');
$links = $table.find(''a.rowLink'');
$(window).resize(function () {
$links.width($table.width());
});
$(window).trigger(''resize'');
});
Podría incluir un ancla dentro de cada <td> , así:
<tr>
<td><a href="#">Blah Blah</a></td>
<td><a href="#">1234567</a></td>
<td><a href="#">more text</a></td>
</tr>
Entonces podrías usar display:block; en los anclajes para hacer la fila completa cliqueable.
tr:hover {
background: red;
}
td a {
display: block;
border: 1px solid black;
padding: 16px;
}
Probablemente sea tan óptimo como lo vas a obtener a menos que recurras a JavaScript.
Puede agregar el rol de botón a una fila de la tabla y Bootstrap cambiará el cursor sin ningún cambio css. Decidí usar ese rol como una forma de hacer que cualquier fila se pueda hacer clic con muy poco 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");
});
});
Puede aplicar este mismo principio para agregar el rol de botón a cualquier etiqueta.
Puede usar el método onclick javascript en tr y hacer que se pueda hacer clic, también si necesita construir su enlace debido a algunos detalles, puede declarar una función en javascript y llamarla en onclick, pasando algunos valores.
Puede utilizar este componente bootstrap:
http://jasny.github.io/bootstrap/javascript/#rowlink
Jasny Bootstrap
Los componentes faltantes para su marco de front-end favorito.
<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
A través de atributos de datos
Agregue la clase .rowlink y el atributo data-link="row" a un elemento <table> o <tbody> . Para otras opciones, agregue el nombre a data-, como en data-target="a.mainlink" Se puede excluir una celda agregando la clase .rowlink-skip a <td> .
A través de JavaScript
Llame a la máscara de entrada a través de javascript:
$(''tbody.rowlink'').rowlink()
Sé que alguien ya ha escrito casi lo mismo, sin embargo, mi manera es la correcta (div no puede ser hija de A) y también es mejor usar las clases.
Puedes imitar una tabla usando CSS y hacer que un elemento A sea la fila
<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;}
Sí, pero no con los elementos <table> estándar. Si usa la display: table propiedades de estilo de display: table , puede hacerlo. Here y here hay algunos problemas para demostrar.
Este código debería hacer el truco:
.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 class="table">
<div class="row">
<div class="cell">
1.1
</div>
<div class="cell">
1.2
</div>
<div class="cell">
1.3
</div>
</div>
<a class="row" href="#">
<div class="cell">
2.1
</div>
<div class="cell">
2.2
</div>
<div class="cell">
2.3
</div>
</a>
</div>
Tenga en cuenta que los roles de aria se utilizan para garantizar una accesibilidad adecuada, ya que no se utilizan los elementos estándar <table> . Es posible que deba agregar roles adicionales como role="columnheader" si corresponde. Obtenga más información en la siguiente guía here .
Una opción muy fácil (funciona también 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>
Ejemplo trabajando here
Una solución mucho más flexible es apuntar cualquier cosa con el atributo data-href. De esta forma puedes reutilizar el código fácilmente en diferentes lugares.
<tbody>
<tr data-href="https://google.com">
<td>Col 1</td>
<td>Col 2</td>
</tr>
</tbody>
Luego, en tu jQuery solo apunta cualquier elemento con ese atributo:
jQuery(document).ready(function($) {
$(''*[data-href]'').on(''click'', function() {
window.location = $(this).data("href");
});
});
Y no olvides poner estilo a tu css:
[data-href] {
cursor: pointer;
}
Ahora puede agregar el atributo data-href a cualquier elemento y funcionará. Cuando escribo fragmentos como este, me gusta que sean flexibles. Siéntase libre de agregar una solución de vainilla js a esto si tiene una.
Usted podría dar a la fila una identificación, por ejemplo,
<tr id="special"> ... </tr>
y luego usa jquery para decir algo como:
$(''#special'').onclick(function(){ window="http://urltolinkto.com/x/y/z";})