Link do wiersza tabeli HTML

Question

Jaki jest najlepszy sposób, aby wiersz tabeli HTML był linkiem? Obecnie używam jquery do zebrania pasków w wierszach, a także do wyróżnienia wybranego wiersza onmouseover/off, więc jeśli JavaScript jest odpowiedzią, użyj jquery.

Answer 1

po prostu użyć 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

Zarejestruj procedurę obsługi zdarzeń onclick dla elementu tr. Coś jak ten przy użyciu 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; 
} 

ten sposób cały obszar każdej komórki będą działać jako łącznik, a więc cała rząd działa jako łącze.

Answer 5

Oto wtyczka jQuery oparta na rozwiązaniu Nicka.

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

Oczekuje, że wiersze zostaną zawinięte w tbody. Wysokość jest ustawiona jawnie, ponieważ oryginalne rozwiązanie Nicka nie zadziałało dla mnie na sąsiednich komórkach o różnych wysokościach. Pamiętaj, aby stylizować elementy jako bloki. Jeśli chcesz zastosować wyściółkę, stosuje się go do A-elementów zamiast komórek tabeli:

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

Wystarczy zadzwonić

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

Nadzieję, że to pomaga. Wiwaty, Richard

Answer 6

Nie trzeba jQuery, jeśli nie przeszkadza wymianie tabelę elementów ogólnych:

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