html - рядок таблиці, як посилання


101

Я не можу встановити рядок таблиці як посилання на щось. Я можу використовувати лише css та html. Я спробував різні речі, починаючи від діви в ряд до чогось іншого, але все ще не можу змусити його працювати.

Відповіді:


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
Оскільки ОП сказав "тільки css і html", я припускаю, що прийняття було для другої відповіді. Зауважте, що якщо у вас немає межі = 0, ви отримаєте проміжок "відсутня посилання" між клітинками таблиці.
система ПАУЗА

1
IIRC комірки таблиці просто повинні бути згорнуті, але можуть мати межу.
Естебан Кюбер

5
Тег <a> не дозволяє використовувати будь-які інші елементи html всередині нього. Потім, як ми можемо пов’язати цілий ряд таблиці, який містить більше даних таблиці? Щось подібне: <tr> <a href=""> <td>Text</td> <td> ..... </a> </tr> .. Нам не може бути подібне?
Абімаран Кугатасан

4
Я рекомендую використовувати замість блоку "display: inline-block". Під час відображення блоку я виявив, що Chrome ігнорує "висоту: 100%" і фактично не робить всю висоту <td> натискання, якщо в цьому ряду є інші елементи, які мають більшу висоту. Виправлення цього вбудованого блоку виправлено цю проблему, а також, можливо, пов’язану проблему з обрізанням тексту всередині елементів таблиці.
orrd

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)

Редагувати

Домовились з Меттом Кантором, використовуючи дані attr. Відредагована відповідь вище


Це насправді дуже елегантно. Цікаво, чи вважається це недійсним 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! : '(
shangxiao

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
Якщо ви хочете показати табличні дані, завжди використовуйте таблицю. Використання колекції знаків і прольотів семантично неправильно, призведе до важкого для читання вмісту, якщо ви втратите CSS та недоступний для того, хто використовує зчитувач екрана.
gulima

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 для подібних цілей є те, що користувачі більше не можуть використовувати середню кнопку миші або натискати клавішу управління, щоб відкрити посилання на новій вкладці (що може насправді засмучувати тих, хто любить відкривати посилання таким чином) . З іншого боку, немає ніяких причин ускладнювати речі, створюючи функцію, яка виконує лише одну просту команду. Якщо ви збираєтеся це зробити, просто введіть "document.location.href = ..." безпосередньо в атрибут onclick.
orrd

7

Відповідь від sirwilliam мені найбільше підходить. Я покращив 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; } });
Рамон

1
У 2014 році, який був недоступний у ванільному js , ви зіпсували брата; P.
botenvouwer

2

Коли я хочу імітувати a <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 - просто вийміть його з першого

$(".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 (шляхом його розміщення або використання обробників подій).

Мінус полягає в тому, що це не призведе до того, що ТР веде себе так, як посилання, як з дівками 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";
    });
});

Встановіть змінні в 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.