imagenes - Cómo envolver las filas de la tabla HTML en las etiquetas<a>

tablas en html ejemplos

Question

¿Es posible envolver filas enteras de la tabla en etiquetas <a> ? Quiero que toda la fila sea un enlace seleccionable.

Si intento lo siguiente, los enlaces se muestran arriba y fuera de la tabla:

Esta:

<table>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
</table>

Renders como este:

<a href="value_url"></a>
<a href="value_url"></a>
<table>
<tr><td>value</td><td>value</td></tr>
<tr><td>value</td><td>value</td></tr>
</table>

Answer 1

¿Por qué no quieres hacer clic evento en tr ? No es posible tener una etiqueta de anclaje como lo desees para que puedas hacer clic en el evento y agregar un CSS adicional para que parezca ancla.

Jquery:

$("table tr").click(function() {
    window.location = "http://www.google.com/";
});

Answer 2

Es HTML no válido tener elementos distintos de thead , tbody o tfoot como elemento directo de una table , y esos elementos solo tienen tr como sus hijos válidos.

Cualquier otro contenido debe estar dentro de un td o th para ser válido.

Lo que está viendo es que el navegador está reestructurando su DOM para que sea tan válido como sea posible. El problema de confiar en ese comportamiento es que diferentes navegadores reaccionan de diferentes maneras.

Si necesita un tr para ser interactivo (y para clics en esos elementos para llevar a algún lugar / hacer algo) debe usar JavaScript.

Pero, respuesta corta, sí, puedes hacerlo, pero no es válido, así que no lo hagas.

Sin embargo, para las filas de tablas interactivas, una solución (en JavaScript simple):

var rows = document.getElementsByTagName(''tr''),
    url;

for (var i=0,len=rows.length; i<len; i++){
    rows[i].onclick = function(){
        uri = this.getAttribute(''data-url'');
        window.location = uri;
    };
}

Demostración de JS Fiddle .

(Lo cual, obviamente, requiere que los elementos tr tengan un atributo data-url para especificar a dónde deben vincularse).

Answer 3

Otra solución simple, única CSS está convirtiendo <a> en elementos de bloque

<tr>
  <td><a href="#">name 1</a></td><td><a href="#">link 1</a></td>    
</tr>
<tr>
  <td><a href="#">name 2</a></td><td><a href="#">link 2</a></td>    
</tr>

El CSS sería:

td > a {
  display: block;
}

Entonces <a> tomaría todo el <td> , y haría que toda la fila se pueda hacer clic sin JS si el enlace se repite para cada celda en una fila.

https://jsfiddle.net/evwa451n/

Answer 4

Podría usar onclick, para que pueda obtener el contenido de forma dinámica

<td onclick="window.location=''http://www.google.com'';" style=''cursor: pointer;''>Hello</td>

http://jsfiddle.net/ankJw/

Answer 5

Se representa así porque el navegador respeta la especificación W3C y solo permite etiquetas <tr> como descendientes directos de <table> .

Como solución, puede colocar una etiqueta <a> dentro de cada <td> que apunte a la misma URL:

<table>
    <tr>
        <td>
            <a href="http://url/stuff">
                First column
            </a>
        </td>
        <td>
            <a href="http://url/stuff">
                Second column
            </a>
        </td>
    </tr>
</table>

O puede vincular un controlador onClick al <tr> con JavaScript. Un ejemplo de jQuery sería este:

$(''table tr'').click(function() {
    window.location = ''http://location/here'';
});

O, mejor aún, use eventos delegados (jQuery 1.7+):

$(''table'').on(''click'', ''tr'', function() {
    window.location = ''http://location/here'';
});

Answer 6

Solo como complemento de otros, tengo que agregar que personalmente prefiero hacer esto

<tr onclick="window.location=''http://www.google.com'';" >
  <td>Text...</td>
</tr>

en el caso de ASP.NET MVC hacerlo como

<tr onclick="window.location = ''@Url.RouteUrl("Product", new { SeName = @product.SeName })'';">

Answer 7

como un enlace en cada td no es una buena alternativa y el uso de js es un poco sucio, aquí hay otro enfoque html / css:

HTML:

<div class="table">
    <a class="table-row" href="/mylink">
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
    </a>
</div>

CSS:

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }