Связать всю строку таблицы?

Ответ 1

Я согласен с Matti. Было бы легко сделать некоторые простые javascript. Быстрый пример jquery будет примерно таким:

<tr>
  <td><a href="http://www.example.com/">example</a></td>
  <td>another cell</td>
  <td>one more</td>
</tr>

и

$('tr').click( function() {
    window.location = $(this).find('a').attr('href');
}).hover( function() {
    $(this).toggleClass('hover');
});

то в вашем CSS

tr.hover {
   cursor: pointer;
   /* whatever other hover styles you want */
}

Ответ 2

К сожалению, нет. Не с HTML и CSS. Вам нужен элемент a, чтобы создать ссылку, и вы не можете обернуть всю строку таблицы в одну.

Ближе всего вы можете связать каждую ячейку таблицы. Лично я бы просто связал одну ячейку и использовал JavaScript, чтобы сделать клик для остальных. Хорошо иметь хотя бы одну ячейку, которая действительно выглядит как ссылка, подчеркнутая и все, для ясности в любом случае.

Вот простой фрагмент jQuery, чтобы сделать все строки таблицы со ссылками кликабельными (он ищет первую ссылку и "кликает" ее)

$("table").on("click", "tr", function(e) {
    if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
        return;

    location.href = $(this).find("a").attr("href");
});

Ответ 3

Пример: http://dl.dropbox.com/u/2915462/probonopublico/linktablerow.html

Связать всю строку:

<table>
  <tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
    <td> ...content... </td>
    <td> ...content... </td>
    ...
  </tr>
</table>

Iff, вы хотели бы выделить подсветку для всей строки, а затем:

<table class="nogap">
  <tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
     ...
  </tr>
</table>

что-то вроде css, которое устранит пробел между ячейками таблицы и изменит фон при наведении:

tr.lovelyrow{
  background-color: hsl(0,0%,90%);
}

tr.lovelyrow:hover{
  background-color: hsl(0,0%,40%);
  cursor: pointer;
}

table.nogap{
  border-collapse: collapse;
}

Iff вы используете Rails 3.0.9, тогда вы можете найти этот примерный код полезным:

В море много рыб, у рыб много весов, вот фрагмент приложения /view/fish/index.erb

<table>
<% @fishies.each do |fish| %>
  <tr onclick="location.href='<%= sea_fish_scales_path(@sea, fish) %>'"> 
    <td><%= fish.title %></td>
  </tr>
<% end %>
</table>

с @fishies и @sea определены в app/controller/seas_controller.rb

Ответ 4

Используйте псевдо-элемент ::before. Таким образом, вам не нужно иметь дело с Javascript или создавать ссылки для каждой ячейки. Используя следующую структуру table

<table>
  <tr>
    <td><a href="http://domain.tld" class="rowlink">Cell</a></td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

все, что нам нужно сделать, это создать элемент блока, охватывающий всю ширину таблицы, используя ::before на желаемой ссылке (.rowlink) в этом случае.

table {
  position: relative;
}

.rowlink::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5em; /* don't forget to set the height! */
}

демо

::before выделяется красным цветом в демонстрации, чтобы вы могли видеть, что он делает.

Ответ 5

Мне кажется, что самым простым решением является sans javascript и просто помещаем ссылку в каждую ячейку (при условии, что у вас нет массивных оврагов между вашими ячейками или действительно считайте границы). У вашего css:

.tableClass td a{
   display: block;
}

а затем добавьте ссылку на ячейку:

<table class="tableClass">
    <tr>
        <td><a href="#link">Link name</a></td>
        <td><a href="#link">Link description</a></td>
        <td><a href="#link">Link somthing else</a></td>
    </tr>
</table>

скучно, но чисто.

Ответ 6

Также зависит, нужно ли использовать элемент таблицы или нет. Вы можете имитировать таблицу с помощью CSS и сделать элемент A строкой

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

CSS

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

Ответ 7

Чтобы связать всю строку, вам нужно определить функцию onclick в вашей строке, которая является элементом <tr> и определить мышь hover в элементе CSS для tr, чтобы сделать указатель мыши типичным щелчок в Интернете:

В таблице:

<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Volker Dötsch &amp; Stefan Knapp</strong></td>
</tr>

В связанном CSS:

tr:hover {
cursor: pointer;
}