¿Cómo hacer que se pueda hacer clic en una fila completa de una tabla como enlace?
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>
Nota del autor I:
Mire otras respuestas a continuación, especialmente las que no usan jquery.
Nota del autor II:
Conservado para la posteridad, pero seguramente fue un enfoque equivocado en 2020 (no era idiomático incluso en 2017).
Respuesta original
Estás usando Bootstrap, lo que significa que estás usando jQuery :^), así 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 es necesario utilizar href ni cambiar de ubicación, puede hacer lo que quiera en la función de controlador de clics. Lea sobre jQueryy cómo escribir controladores;
La ventaja de usar una clase sobre una identificación 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 código base no cambia. El mismo controlador se haría cargo de todas las filas.
Otra opción
Puede utilizar devoluciones de llamada de Bootstrap jQuery como esta (en una document.readydevolución de llamada):
$("#container").on('click-row.bs.table', function (e, row, $element) {
window.location = $element.data('href');
});
Esto tiene la ventaja de no restablecerse al ordenar la tabla (lo que ocurre con la otra opción).
Nota
Dado que esto se publicó window.document.locationestá obsoleto (o al menos obsoleto), utilícelo window.locationen su lugar.
No puedes hacer eso. Es HTML no válido. No puedes poner a <a>entre a <tbody>y a <tr>. Pruebe esto en su lugar:
<tr onclick="window.location='#';">
...
</tr>
agregar estilo para la vista del puntero
[data-href] { cursor: pointer; }
Cuando lo haga, querrá usar JavaScript para asignar el controlador de clics fuera del HTML.
Podrías 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>
Luego, podría utilizar display:block;los anclajes para hacer que se pueda hacer clic en la fila completa.
tr:hover {
background: red;
}
td a {
display: block;
border: 1px solid black;
padding: 16px;
}
Ejemplo jsFiddle aquí.
Probablemente esto sea lo más óptimo posible a menos que recurra a JavaScript.
