Link riga tabella HTML

Question

Qual è il modo migliore per creare un collegamento a una riga di una tabella HTML? Attualmente sto usando jquery per zebra stripe le righe e anche per evidenziare onmouseover/off row selezionato, quindi se JavaScript è la risposta, per favore usa jquery.

Answer 1

mi basta usare i 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

Registrare un gestore di eventi onclick per l'elemento tr. Qualcosa di simile utilizzando 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; 
} 

In questo modo, tutta l'area di ciascuna cella agirà come un link, di conseguenza, l'intera la fila funge da collegamento.

Answer 5

Ecco un plugin jQuery basato sulla soluzione di 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); 

Si aspetta che le righe vengano avvolte nel tbody's. L'altezza è impostata in modo esplicito in quanto la soluzione originale di Nick non ha funzionato per me su celle vicine con altezze diverse. Assicurati di disegnare a-elementi come blocchi. Se si desidera applicare imbottiture, applicarlo alla A-elementi, invece di celle di una tabella:

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

Chiamate

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

Speranza che aiuta. Cheers, Richard

Answer 6

Non hai bisogno di jQuery, se non ti dispiace la sostituzione del tavolo da elementi generici:

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