html - fila de la tabla como un enlace


101

No puedo establecer la fila de mi tabla como enlace a algo. Solo puedo usar css y html. Intenté cosas diferentes, desde div en fila hasta algo diferente, pero todavía no puedo hacer que funcione.

Respuestas:


175

Tienes dos formas de hacer esto:

  • Usando javascript:

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

  • Usando anclajes:

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

Hice el segundo trabajo usando:

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

Para deshacerse del espacio muerto entre columnas:

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

Aquí hay una demostración simple del segundo ejemplo: DEMO


8
Dado que OP dijo "solo css y html", supongo que la aceptación fue para la segunda respuesta. Tenga en cuenta que si no tiene border = 0 obtendrá un espacio de "enlace perdido" entre las celdas de la tabla.
PAUSA del sistema

1
IIRC, las celdas de la tabla solo deben colapsarse, pero pueden tener un borde.
Esteban Küber

5
La etiqueta <a> no permite ningún otro elemento html en su interior. Entonces, ¿cómo podemos vincular una fila de tabla completa que tiene más datos de tabla? Algo como esto: <tr> <a href=""> <td>Text</td> <td> ..... </a> </tr> .. No podemos tener algo así, ¿no?
Abimaran Kugathasan

4
Recomendaría usar "display: inline-block" en lugar de block. Con la visualización de bloque, descubrí que Chrome estaba ignorando la "altura: 100%" y no estaba haciendo clic en toda la altura del <td> si hay otros elementos en la misma fila que tienen una altura mayor. Hacerlo en bloque solucionó ese problema, y ​​también un problema posiblemente relacionado con el texto que se recorta dentro de los elementos de la tabla.
2012

2
Los anclajes todavía tienen espacio muerto entre columnas (probado con Google Chrome versión 40.0.2214.115 m)
Yuri

55

Me hice una función de jquery personalizada:

HTML

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

jQuery

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

Fácil y perfecto para mí. Ojalá te ayude.

(Sé que OP solo quiere CSS y HTML, pero considere jQuery)

Editar

De acuerdo con Matt Kantor usando data attr. Respuesta editada arriba


Eso es bastante elegante en realidad. Me pregunto si se considera html inválido según los estándares de w3c.
Mahn

14
Yo usaría data-hrefo algo así.
Matt Kantor

2
El enlace JSFiddle conduce a 404.
Flox

1
agregue la clase ay <table class='tr_link' >entréguela .tr_link{cursor:pointer}en css para un mejor uso.
Bagova

6
Para agregar el efecto de mano al pasar el mouse, agréguelo tr[data-href] { cursor: pointer }a sus hojas de estilo
OverCoder

27

Si está en un navegador que lo admite, puede usar CSS para transformar el <a>en una fila de tabla:

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

Por supuesto, está limitado a no colocar elementos de bloque dentro del <a>. Tampoco puedes mezclar esto con un<table>


1
¡Gran idea, gracias! Parece funcionar en Opera 8.5 / , Firefox 0.8 / , IE8, iPhone Simulator / Safari / muy antiguo :)
biziclop

1
Esta debería ser la técnica que los desarrolladores intentan adoptar dado que las tablas CSS son compatibles con todos los navegadores actuales: caniuse.com/#feat=css-table ¡ El único problema es que no puedo usar esto con Bootstrap! : '(
shangxiao

13

Si tiene que usar una tabla, puede poner un enlace en cada celda de la tabla:

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

Y haz que los enlaces llenen todas las celdas:

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

Si puede usar <div>s en lugar de una tabla, su HTML puede ser mucho más simple y no obtendrá "espacios" en los enlaces entre las celdas de la tabla:

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

Aquí está el CSS que acompaña al <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
Si desea mostrar datos tabulares, utilice siempre una tabla. El uso de una colección de divs y spans es semánticamente incorrecto, hará que el contenido sea difícil de leer si pierde el CSS y será inaccesible para quienes usan un lector de pantalla.
gulima

12

La forma habitual es asignar algo de JavaScript al onClickatributo delTR elemento.

Si no puede usar JavaScript, entonces debe usar un truco:

  1. Agregue el mismo enlace a cada una TDde las mismas filas (el enlace debe ser el elemento más externo de la celda).

  2. Convierta los enlaces en elementos de bloque: a { display: block; width: 100%; height: 100%; }

Esto último obligará al enlace a llenar toda la celda, por lo que al hacer clic en cualquier lugar se invocará el enlace.


7

No puede envolver un <td>elemento con una <a>etiqueta, pero puede lograr una funcionalidad similar usando el onclickevento para llamar a una función. Aquí se encuentra un ejemplo , algo como esta función:

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

Y agréguelo a su mesa así:

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

21
Uno de los problemas con el uso de onClick para este tipo de propósito es que los usuarios ya no pueden usar el botón central del mouse o controlar y hacer clic para abrir enlaces en una nueva pestaña (lo que puede ser realmente frustrante para aquellos de nosotros que amamos abrir enlaces de esa manera) . Otra nota al margen, no hay razón para complicar las cosas creando una función que solo hace un comando simple. Si va a hacer esto, simplemente coloque "document.location.href = ..." directamente en el atributo onclick.
2012

7

La respuesta de sirwilliam me queda mejor. Mejoré el Javascript con soporte para la tecla de acceso rápido Ctrl + LeftClick (abre la página en una nueva pestaña). Event ctrlKeyes utilizado por PC, 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;
    }
});

Ejemplo

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


Bueno. Ctrl + LeftClick no rompe UIX
Yuri

1
Sigue perdiendo 'clic derecho -> abrir en una nueva pestaña' o 'abrir en una nueva ventana'
JGInternational

4

Sé que esta pregunta ya está respondida, pero todavía no me gusta ninguna solución en esta página. Para las personas que usan JQuery, hice una solución final que le permite darle a la fila de la tabla casi el mismo comportamiento que la<a> etiqueta.

Esta es mi solucion:

jQuery Puede agregar esto, por ejemplo, a un archivo javascript estándar incluido

$('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 Ahora puede usar esto en cualquier <tr>elemento dentro de su HTML

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

Tan cerca de js puro. 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
En 2014 eso no estaba disponible en vainilla js , malcriado mocoso; P.
botenvouwer

2

Cuando quiero simular un <tr>con un enlace pero respetando los estándares html, hago esto.

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

De esta manera, cuando alguien coloca el mouse en un TR, toda la fila (y estos enlaces) obtiene el estilo de desplazamiento y no puede ver que hay varios enlaces.

La esperanza puede ayudar a alguien.

Violín AQUÍ


1

Esto le ahorra tener que duplicar el enlace en el tr - simplemente pescarlo desde la primera 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>

¿Quizás algo en este sentido? Aunque usa JS, es la única forma de hacer clic en una fila (tr).

A menos que tenga una sola celda con una etiqueta de anclaje que llene toda la celda.

Y luego, no deberías usar una mesa de todos modos.


0

Después de leer este hilo y algunos otros, se me ocurrió la siguiente solución en 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 usarlo, coloque el href en tr / td / th en el que desea que se pueda hacer clic como: <tr href="http://stackoverflow.com"> . Y asegúrese de que el script anterior se ejecute después de que se cree el elemento tr (por su ubicación o usando controladores de eventos).

La desventaja es que no hará que los TR se comporten como enlaces como los divs con display: table;, y no se podrán seleccionar con el teclado ni tendrán texto de estado.Editar: Hice que la navegación del teclado funcionara configurando onkeydown, role y tabIndex, podría eliminar esa parte si solo se necesita el mouse. Sin embargo, no mostrarán la URL en la barra de estado al pasar el mouse.

Puede diseñar específicamente los TR de enlace con el selector CSS "tr [href]".


0

Tengo otra forma. Especialmente si necesita publicar datos 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";
    });
});

Establecer variable configura variables en SESIONES que la página a la que va a acceder puede leer y actuar.

Realmente me gustaría una forma de publicar directamente en la ubicación de una ventana, pero no creo que sea posible.


0

Gracias por esto. Puede cambiar el icono de desplazamiento asignando una clase CSS a la fila como:

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

y el CSS se ve así:

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

-2

¿Puedes agregar una etiqueta A a la fila?

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

¿Es esto lo que estás preguntando?


1
No, necesito hacer clic en todas las áreas de filas.
Max Frai
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.