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


101

Я не могу установить свою строку таблицы как ссылку на что-то. Могу использовать только css и html. Я пробовал разные вещи от div in row к чему-то другому, но все еще не могу заставить его работать.

Ответы:


175

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

  • Используя 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


8
Поскольку OP сказал «только css и html», я предполагаю, что был принят второй ответ. Обратите внимание, что если у вас нет border = 0, вы получите пробел «недостающее звено» между ячейками таблицы.
система ПАУЗА

1
IIRC ячейки таблицы просто должны быть свернуты, но могут иметь границу.
Эстебан Кюбер,

5
Тег <a> не допускает внутри себя других элементов html. Затем, как мы можем связать целую строку таблицы, в которой есть больше данных таблицы? Примерно так: <tr> <a href=""> <td>Text</td> <td> ..... </a> </tr> .. У нас не может быть такого ne?
Абимаран Кугатхасан

4
Я бы рекомендовал использовать «display: inline-block» вместо block. При отображении блоков я обнаружил, что Chrome игнорирует «height: 100%» и фактически не делает всю высоту <td> доступной для щелчка, если в той же строке есть другие элементы, которые имеют большую высоту. Сделав его встроенным блоком, вы устранили эту проблему, а также, возможно, связанную проблему с обрезанием текста внутри элементов таблицы.
orrd 09

2
У якорей все еще есть мертвое пространство между столбцами (протестировано с версией Google Chrome 40.0.2214.115 м)
Юрий

55

Я сделал себе кастомную функцию jquery:

HTML

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

jQuery

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

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

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

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

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


На самом деле это довольно элегантно. Интересно, считается ли он недействительным html по стандартам w3c.
Ман,

14
Я бы использовал data-hrefили что-то подобное.
Мэтт Кантор

2
Ссылка JSFiddle ведет к 404.
Flox

1
добавить класс <table class='tr_link' >и передать его .tr_link{cursor:pointer}в CSS для наилучшего использования.
Багова

6
Чтобы добавить эффект руки при наведении, добавьте tr[data-href] { cursor: pointer }в свои таблицы стилей
OverCoder

27

Если вы используете браузер, который его поддерживает, вы можете использовать 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>


1
Отличная идея, спасибо! Кажется, он работает в Opera 8.5 / , Firefox 0.8 / , IE8, iPhone Simulator / Safari / очень старый :)
biziclop

1
Это должен быть метод, который разработчики пытаются использовать, учитывая, что таблицы CSS поддерживаются всеми текущими браузерами: caniuse.com/#feat=css-table Единственная проблема в том, что я не могу использовать это с Bootstrap! : '(
шансяо

13

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

<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 */
}

1
Если вы хотите отображать табличные данные, всегда используйте таблицу. Использование коллекции div и промежутков семантически некорректно, сделает ваш контент трудным для чтения, если вы потеряете CSS, и станет невозможным для тех, кто использует программу чтения с экрана.
Гулима

12

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

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

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

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

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


7

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

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

И добавьте его в свою таблицу так:

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

21
Одна из проблем с использованием onClick для таких целей заключается в том, что пользователи больше не могут использовать среднюю кнопку мыши или щелкать, удерживая нажатой клавишу Control, для открытия ссылок на новой вкладке (что может быть очень неприятно для тех из нас, кто любит открывать ссылки таким образом). . Еще одно замечание: нет причин усложнять ситуацию, создавая функцию, которая выполняет только одну простую команду. Если вы собираетесь это сделать, просто поместите «document.location.href = ...» прямо в атрибут onclick.
orrd 05

7

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

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/


Хорошо. Ctrl + LeftClick не нарушает работу UIX
Юрий

1
По-прежнему теряется «щелчок правой кнопкой мыши -> открыть в новой вкладке» или «открыть в новом окне»
JGInternational

4

Я знаю, что на этот вопрос уже дан ответ, но мне все еще не нравится какое-либо решение на этой странице. Для людей, использующих 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>

Так близко к чистому js. document.querySelector('tr[url]').addEventListener("mousedown", function(e){ var click = e.which; var url = this.getAttribute("url"); if(url){ if(click == 1){ window.location.href = url; } else if(click == 2){ window.open(url, '_blank'); window.focus(); } return true; } });
Ramon Bakker

1
В 2014 году, которого не было в vanilla js , вы испортили brat; P.
botenvouwer

2

Когда я хочу смоделировать <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, вся строка (и эти ссылки) получает стиль наведения, и он не может видеть, что есть несколько ссылок.

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

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


1

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

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

0
//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Возможно, что-то в этом роде? Хотя он использует JS, но это единственный способ сделать строку (tr) кликабельной.

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

Кроме того, вам все равно не следует использовать стол.


0

Прочитав эту и некоторые другие ветки, я пришел к следующему решению на javascript:

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

Для того, чтобы использовать его положить HREF в тр / тд / ой , что вы хотите быть интерактивными , как: <tr href="http://stackoverflow.com">. И убедитесь, что приведенный выше сценарий выполняется после создания элемента tr (путем его размещения или использования обработчиков событий).

Обратной стороной является то, что TR полностью не будет вести себя как ссылки, как с div с display: table;, и они не будут выбираться с клавиатуры или иметь текст состояния. Изменить: я сделал работу с клавиатурой, установив onkeydown, role и tabIndex, вы можете удалить эту часть, если нужна только мышь. Однако они не будут отображать URL-адрес в строке состояния при наведении курсора.

Вы можете стилизовать TR ссылки с помощью селектора CSS "tr [href]".


0

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

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

Set variable устанавливает переменные в SESSIONS, которые страница, на которую вы собираетесь, может читать и действовать.

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


0

Спасибо за это. Вы можете изменить значок при наведении курсора, присвоив строке класс CSS, например:

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

и CSS выглядит так:

<style>
    .pointer { cursor: pointer; }
</style>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.