html - строка таблицы как ссылка

Question

Я не могу установить строку таблицы как ссылку на что-то. Я могу использовать только CSS и HTML. Я пробовал разные вещи, от div в ряд, до чего-то другого, но все равно не могу заставить его работать.

Answer 1

У вас есть два способа сделать это:

• Использование JavaScript:

  <tr onclick="document.location = 'links.html';">

• Использование якорей:

  <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

Я сделал вторую работу, используя:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

Чтобы избавиться от мертвого пространства между столбцами:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Вот простая демонстрация второго примера: DEMO

Answer 2

Я сделал себе пользовательскую функцию jquery:

Html

<tr data-href="site.com/whatever">

JQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

Легко и идеально подходит для меня. Надеюсь, это поможет вам.

(я знаю, что OP хочет только CSS и HTML, но рассмотрим jQuery)

Редактировать

Согласился с Мэттом Кантором, используя data attr. Отредактированный ответ выше

Answer 3

Если вы используете браузер, который поддерживает его, вы можете использовать CSS для преобразования <a> в строку таблицы:

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Конечно, вы не должны помещать блочные элементы внутрь <a>. Вы также не можете смешать это с обычным <table>

Answer 4

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

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

И заставить ссылки заполнить целые ячейки:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

Если вы можете использовать <div> s вместо таблицы, ваш HTML может быть намного проще, и вы не получите «пробелов» в ссылках между ячейками таблицы:

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

Вот CSS, который идет с методом <div>:

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}

Answer 5

Обычным способом является присвоение некоторого JavaScript атрибуту onClick элемента TR.

Если вы не можете использовать JavaScript, то вы должны использовать трюк:

1. Добавьте одну и ту же ссылку к каждому TD той же строки (ссылка должна быть самым внешним элементом в ячейке).

2. Превратить ссылки в элементы блока: a { display: block; width: 100%; height: 100%; }

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

Answer 6

Нельзя обернуть элемент <td> тегом <a>, но вы можете выполнить аналогичные функции, используя событие onclick для вызова функции. Пример найден здесь , что-то вроде этой функции:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

И добавьте это к вашему столу так:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

Answer 7

Ответ от sirwilliam подходит мне лучше всего. Я улучшил Javascript с поддержкой горячих клавиш Ctrl + LeftClick (открывает страницу в новой вкладке). Событие ctrlKey используется ПК, metaKey - Mac.

Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

Пример

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

Answer 8

Я знаю, что на этот вопрос уже дан ответ, но мне все еще не нравится какое-либо решение на этой странице. Для людей, которые используют JQuery, я сделал окончательное решение, которое позволяет вам присвоить строке таблицы почти то же поведение, что и тег <a>.

Это мое решение:

jQuery Вы можете добавить это, например, к стандартному включенному файлу JavaScript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 1){
            window.location.href = url;
        }
        else if(click == 2){
            window.open(url, '_blank');
            window.focus();
        }
        return true;
    }
});

HTML Теперь вы можете использовать это на любом элементе <tr> внутри вашего HTML

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>

Answer 9

Когда я хочу смоделировать <tr> со ссылкой, но соблюдая стандарты HTML, я делаю это.

HTML:

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS:

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

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

Надежда может кому-то помочь.

Скрипка ЗДЕСЬ

Answer 10

Это избавляет вас от необходимости дублировать ссылку в tr - просто выловить ее из первого a.

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});