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.

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

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

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>

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

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.

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>

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/

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>

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Í

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;
}
});

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

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

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.

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>

¿Puedes agregar una etiqueta A a la fila?

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

¿Es esto lo que estás preguntando?