filas - tablas en html5

html-fila de la tabla como un enlace

Question

No puedo configurar mi fila de la tabla como un enlace a algo. Puedo usar solo css y html. Probé diferentes cosas, desde div en una fila hasta otra, pero todavía no puedo hacer que funcione.

Answer 1

¿Puedes agregar una etiqueta A en la fila?

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

¿Es esto lo que estás preguntando?

Answer 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 forma, cuando alguien va con su mouse en un TR, toda la fila (y estos enlaces) obtiene el estilo de desplazamiento y no puede ver que hay múltiples enlaces.

Hope puede ayudar a alguien.

Violín HERE

Answer 3

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 que desee que se pueda hacer clic como: <tr href="http://.com"> . Y asegúrese de que el script anterior se ejecute después de que se crea el elemento tr (por su ubicación o por medio de manejadores de eventos).

La desventaja es que no hará que los TR se comporten como enlaces como con divs con display: table; , y no serán seleccionables por teclado o tendrán texto de estado. Editar: Hice el trabajo de navegación del teclado 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 ratón.

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

Answer 4

Esto te ahorra tener que duplicar el enlace en el tr, simplemente pescarlo del primero a.

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

Answer 5

Gracias por esto. Puede cambiar el icono de desplazamiento al asignar 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>

Answer 6

La forma habitual es asignar algo de JavaScript al atributo onClick del elemento TR .

Si no puedes usar JavaScript, entonces debes usar un truco:

1. Agregue el mismo enlace a cada TD de la misma fila (el enlace debe ser el elemento más externo en la celda).

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

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

Answer 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 la nueva pestaña). El evento ctrlKey es utilizado por las PC, metaKey por 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/

Answer 8

Me hice una función 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í Espero que te ayude

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

Editar

De acuerdo con Matt Kantor utilizando datos attr. Respuesta editada arriba

Answer 9

No puede ajustar un elemento <td> con una etiqueta <a> , pero puede lograr una funcionalidad similar al usar el evento onclick para llamar a una función. Un ejemplo se encuentra here , algo así como esta función:

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

Y agrégalo a tu mesa así:

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

Answer 10

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 dar a la fila de la tabla casi el mismo comportamiento que la etiqueta <a> .

Esta es mi solución:

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

$(''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 elemento <tr> dentro de su HTML

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

Answer 11

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 haga que los enlaces llenen las celdas completas:

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 vacíos" 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 va con el método <div> :

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

Answer 12

Si está en un navegador que lo admite, puede usar CSS para transformar el <a> en una fila de la 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ás limitado a no colocar elementos de bloque dentro del <a> . Tampoco puedes mezclar esto con una <table> regular

Answer 13

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 la variable configura las variables en SESIONES que la página que va a leer puede leer y actuar.

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

Answer 14

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

Answer 15

//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 en esta línea tal vez? Aunque usa JS, pero esa 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 entonces, no deberías estar usando una tabla de todos modos.