Enlace de la fila de la tabla HTML

Question

¿Cuál es la mejor manera de hacer que una fila de una tabla HTML sea un enlace? Actualmente estoy usando jquery para cebra stripe las filas y también para resaltar onmouseover/off row seleccionado, así que si JavaScript es la respuesta, usa jquery.

Answer 1

sólo tiene que utilizar CSS:

<style> 
table.collection {width:500px;border-collapse:collapse;} 
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;} 
table.collection tr:hover {background-color:#ffe;} 
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:0px;} 
table.collection td a {text-decoration:none; display:block; padding:0px; height:100%;} 
</style> 
<table class="collection"> 
<tr> 
    <td><a href="#">Linky1</a></td> 
    <td><a href="#">Data1</a></td> 
</tr> 
<tr> 
    <td><a href="#">Linky2</a></td> 
    <td><a href="#">Data2</a></td> 
</tr> 
</table> 

Answer 2

Registre un controlador de eventos onclick para el elemento tr. Algo como esto usando jQuery:

$("tr").bind("click", function(){ 
    window.location = 'http://www.example.com/'; 
}); 

Answer 3

$(document).ready(function(){ 
    $("tr").click(function(){ 
     /* personally I would throw a url attribute (<tr url="http://www.hunterconcepts.com">) on the tr and pull it off on click */ 
     window.location = $(this).attr("url"); 

    }); 
}); 

Answer 4

<td> 
    <a href="/whatevs/whatevs"> 
     <div class="tdStreacher"> linkName 
     </div> 
    </a> 
</td> 

.tdStreacher{ 
    height: 100%; 
    width: 100%; 
    padding: 3px; 
} 

De esta manera, toda la superficie de cada célula actuará como enlace, por lo tanto, el conjunto fila actuar como un enlace.

Answer 5

Aquí hay un plugin jQuery basado en la solución de Nick.

(function($) { 
    $.fn.linkWholeRows = function() { 

    // for each object 
    return this.each(function() { 

     // for each row 
     $(this).find('tbody tr').each(function() { 
     // get the first link's href 
     var href = $(this).find('td > a').attr('href'); 
     // if none found then 
     if (href === undefined) { 
      return true; // continue 
     } 

     // wrap all cells with links that do not already have a link 
     $(this).children().not(':has(a)').each(function() { 
      $(this).contents().wrapAll('<a href="' + href + '" />'); 
     }); 

     // apply the row's height to all links 
     // in case that the cells' content have different heights 
     var height = $(this).children().css('height'); 
     $(this).find('td > a').each(function() { 
      $(this).css('height', height); 
      // do not forget to apply display:block to the links 
      // via css to make it work properly 
     }); 
     }); // each row 

    }); // each object 

    }; 
})(jQuery); 

Espera que las filas se envuelvan en tbody's. La altura se establece explícitamente, ya que la solución original de Nick no funcionó para mí en las celdas vecinas con diferentes alturas. Asegúrate de diseñar elementos a como bloques. Si desea aplicar el relleno, que se aplican a los a-elementos en vez de celdas de la tabla:

a { 
    display: block; 
    padding: 0.25em 0.5em; 
} 
tbody td { padding: 0; } 

simplemente llaman

$('#your-table').linkWholeRows(); 

espero que ayude. Saludos, Richard

Answer 6

No es necesario jQuery si no te importa la sustitución de la tabla de elementos genéricos:

<style> 
    .table { 
     border-collapse: collapse; 
     border-spacing: 0; 
     display: table; 
    } 
    .tr { 
     display: table-row; 
    } 
    .td { 
     display: table-cell; 
    } 

</style> 

<section class="table"> 
    <a class="tr" href="#"> 
     <div class="td"> 
      A 
     </div> 
     <div class="td"> 
      B 
     </div> 
     <div class="td"> 
      C 
     </div> 
    </a> 
</section>