Ссылка на строку HTML-таблицы

Question

Каков наилучший способ сделать строку таблицы HTML ссылкой? В настоящее время я использую jquery для полосы зебры строк, а также для выделения выделенной строки onmouseover/off, поэтому, если JavaScript является ответом, используйте jquery.

Answer 1

Я просто использовать 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

Зарегистрировать обработчик события onclick для элемента tr. Что-то вроде этого с помощью 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; 
} 

Таким образом, все площадь каждой ячейки будет выступать в качестве связующего звена, следовательно, вся строка действует как ссылка.

Answer 5

Это плагин jQuery, основанный на решении Ника.

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

Ожидает, что строки будут обернуты в корпус. Высота устанавливается явно, так как исходное решение Ника не работает для меня на соседних ячейках с разной высотой. Удостоверьтесь, что в качестве блоков заданы элементы a. Если вы хотите применить отступы, применить его к а-элементам вместо ячеек таблицы:

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

Просто позвоните

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

Надеется, что это помогает. Cheers, Richard

Answer 6

Вам не нужно Jquery, если вы не возражаете, заменяя таблицу общих элементов:

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