¿Vincular toda la fila de la tabla?

Question

Sé que es posible vincular una celda de tabla completa con CSS.

.tableClass td a{ 
    display: block; 
} 

¿Hay alguna manera de aplicar un enlace a toda una fila de la tabla?

Answer 1

Estoy de acuerdo con Matti. Sería fácil de hacer con un simple javascript. Un ejemplo jQuery rápida sería algo como esto:

<tr> 
    <td><a href="http://www.example.com/">example</a></td> 
    <td>another cell</td> 
    <td>one more</td> 
</tr> 

y

$('tr').click(function() { 
    window.location = $(this).find('a').attr('href'); 
}).hover(function() { 
    $(this).toggleClass('hover'); 
}); 

entonces en su CSS

tr.hover { 
    cursor: pointer; 
    /* whatever other hover styles you want */ 
} 

Answer 2

Lamentablemente, no. No con HTML y CSS. Necesita un elemento a para hacer un enlace, y no puede envolver una fila completa de la tabla en uno.

Lo más cercano que puede obtener es vincular cada celda de la tabla. Personalmente, simplemente vincularía una celda y usaría JavaScript para hacer que el resto se pueda hacer clic. Es bueno tener al menos una celda que realmente se vea como un enlace, subrayado y todo, para mayor claridad de todos modos.

Aquí es un simple fragmento de jQuery para hacer todas las filas de la tabla con hacer clic en enlaces (que busca el primer enlace y "clicks" que)

$("table").on("click", "tr", function(e) { 
    if ($(e.target).is("a,input")) // anything else you don't want to trigger the click 
     return; 

    location.href = $(this).find("a").attr("href"); 
}); 

Answer 3

Ejemplo: toda http://xxjjnn.com/linktablerow.html

Enlace consecutivas:

<table> 
    <tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">** 
    <td> ...content... </td> 
    <td> ...content... </td> 
    ... 
    </tr> 
</table> 

Iff desea hacer Resaltando encima del ratón para toda la fila, entonces:

<table class="nogap"> 
    <tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">** 
    ... 
    </tr> 
</table> 

con algo como lo siguiente para CSS, lo que eliminará la brecha entre la mesa células y cambiar el fondo en vuelo estacionario:

tr.lovelyrow{ 
    background-color: hsl(0,0%,90%); 
} 

tr.lovelyrow:hover{ 
    background-color: hsl(0,0%,40%); 
    cursor: pointer; 
} 

table.nogap{ 
    border-collapse: collapse; 
} 

el foro se está utilizando rieles 3.0.9 entonces usted puede encontrar este código ejemplo útil:

mar tiene muchos peces, pescado tiene muchas escalas, aquí es fragmento de app/vista/pescado/index.erb

<table> 
<% @fishies.each do |fish| %> 
    <tr onclick="location.href='<%= sea_fish_scales_path(@sea, fish) %>'"> 
    <td><%= fish.title %></td> 
    </tr> 
<% end %> 
</table> 

con @fishies y @sea se definen en aplicación /controllers/seas_controller.rb

Answer 4

Siento que la solución más simple es sans javascript y simplemente poner el enlace en cada celda (siempre que no tenga barrancos masivos entre las celdas o realmente piense en las líneas de borde). Tenga su css:

.tableClass td a{ 
    display: block; 
} 

y luego añadir un enlace por célula:

<table class="tableClass"> 
    <tr> 
     <td><a href="#link">Link name</a></td> 
     <td><a href="#link">Link description</a></td> 
     <td><a href="#link">Link somthing else</a></td> 
    </tr> 
</table> 

aburrido pero limpio.

Answer 5

Utilice el pseudo elemento ::before. De esta manera, solo usted no tiene que lidiar con Javascript o crear enlaces para cada celda. Uso de la table estructura siguiente

<table> 
    <tr> 
    <td><a href="http://domain.tld" class="rowlink">Cell</a></td> 
    <td>Cell</td> 
    <td>Cell</td> 
    </tr> 
</table> 

todo lo que tenemos que hacer es crear un elemento de bloque que abarca toda la anchura de la tabla utilizando ::before en el enlace deseado (.rowlink) en este caso.

table { 
    position: relative; 
} 

.rowlink::before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 1.5em; /* don't forget to set the height! */ 
} 

demo

El ::before se resalta en rojo en la demo para que pueda ver lo que está haciendo.

Answer 6

También depende si necesita usar un elemento de tabla o no. Puede imitar una tabla usando CSS y crea un elemento A la fila

<div class="table" style="width:100%;"> 
    <a href="#" class="tr"> 
    <span class="td"> 
     cell 1 
    </span> 
    <span class="td"> 
     cell 2 
    </span> 
    </a> 
</div> 

css:

.table{display:table;} 
.tr{display:table-row;} 
.td{display:table-cell;} 
.tr:hover{background-color:#ccc;} 

Answer 7

Para vincular toda la fila, es necesario definir onclick función de su fila, que es <tr> elemento y definir un ratón hover en el CSS para tr elemento para hacer que el puntero del ratón a un típico clic mano en web:

en la tabla:

<tr onclick="location.href='http://www.google.com'"> 
<td>blah</td> 
<td>blah</td> 
<td><strong>Text</strong></td> 
</tr> 

En CSS relacionada:

tr:hover { 
cursor: pointer; 
}