Вопрос по html, css – В связанных CSS:

46

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

.tableClass td a{
   display: block;
}

Есть ли способ применить ссылку ко всей строке таблицы?

Ваш Ответ

7   ответов
2

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

В таблице:

<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>

В связанных CSS:

tr:hover {
cursor: pointer;
}
24

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");
});
ack, вы правы пропустили, что вы отключали событие click строки таблицы. знак равно Adrian
Для большого количества элементов, таких какtr, delegate гораздо эффективнее, чем при использованииlive Yi Jiang
Действительно, если я нажимаю на другую ячейку, она работает как ссылка, но просто обновляет ту же страницу. Кроме того, возможно ли сделать так, чтобы это выглядело как ссылка? Возможно добавить курсор: указатель на все TD? santa
@Yi Jiang: Ты уверен ...? Насколько мне известноlive просто прикрепляет один обработчик событий к уровню документа, который обрабатывает все. В настоящее время,live может стать неэффективным, если у вас многообработчикипотому что все они будут обрабатываться практически для всех событий типа, но количество элементов не должно иметь значения. Matti Virkkunen
@Aliester: с методом JS не должно быть пробелов ... AFAIK. Кроме того, у кого есть пространство между клетками в эти дни в любом случае Matti Virkkunen
17

Использовать::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 в демонстрации выделен красным, чтобы вы могли видеть, что он делает.

Это гораздо более чистое решение, чем все вышеперечисленное. Любопытно: как бы вы изменили это дляtd с участиемpadding-top? eirikir
@eirikir Добавление негативаmargin-top в.rowlink::before равныйpadding-top изtd работал на меня. jzzocc
Отличный материал, лучшее решение, которое я видел до сих пор. logos
Очень красиво смотрится. Всегда лучше не полагаться на JavaScript! Одно предостережение: с точки зрения разметки содержимое других ячеек не находится в якоре. Это может повлиять на удобство использования (и, возможно, SEO) в некоторых случаях. И это не работает в не-css агентах. Marten Koetsier
18

http://xxjjnn.com/linktablerow.html

Ссылка на весь ряд:

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

Если вы хотите выделить курсор мыши для всего ряда, то:

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

Если вы используете 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 / controllers / seas_controller.rb

Проблема с onclick в том, что он не работает с "открыть в новой вкладке" Sergey Kandaurov
Вопрос не имеет никакого отношения к рельсам, и соответствующая часть вашего ответа от этого не зависит. kbanman
:hover может быть опущен, или вы могли бы даже встроить стиль, как<tr style="cursor:pointer" onclick="location.href='url'"> Aaron Blenkush
Пожалуйста, старайтесь избегать атрибутов onclick и других атрибутов *, они плохого стиля, потому что они нарушают разделение между разметкой и логикой. scy
6

что самое простое решение - это без 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>

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

Я расширил идею здесь -jsfiddle.net/17qygaz1 Wayne Bloss
8

нужен ли вам элемент таблицы или нет. Вы можете имитировать таблицу с помощью 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;}
Хорошее нестандартное мышление. OP специально не требовал семантики таблицы. Однако это не решение для реальных табличных данных. Marten Koetsier
39

я согласен сМатти, Было бы легко сделать это с помощью некоторого простого 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 */
}
Это может работать для меня, но это по щелчку. Может ли он вести себя как ссылка при наведении курсора? Благодарю. santa
конечно, то, что я, вероятно, сделаю, это добавлю класс при наведении и добавим любой стиль, который вы хотите внутри этого класса. Я обновлю свой пост с примером. Jeff
У этого решения много проблем. Например, вы не можете щелкнуть правой кнопкой мыши по любой из «других» ячеек таблицы и выбрать «копировать ссылку», «открыть в новой вкладке» или что-то еще. Кроме того, вы не можете сдвигать, удерживать и удерживать нажатой клавишу, удерживая нажатой клавишу «Command», чтобы открыть строку на новой вкладке, потому что событие «click», тем не менее, сработает и вызоветобе электрический тока также новая вкладка для перехода на целевую страницу. scy
посмотрите живой пример здесь:jsfiddle.net/hUMvw Jeff

Похожие вопросы