Ссылка на строку таблицы 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

$(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 3

Вам не нужен 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>

Answer 4

Зарегистрировать обработчик события onclick для элемента tr. Примерно так с помощью jQuery:

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

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

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

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

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

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

Надеюсь, это поможет. Ура, Ричард

Answer 6

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

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

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