Відповіді:
У вас є два способи зробити це:
Використання 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
Я зробив власну функцію jquery:
<tr data-href="site.com/whatever">
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
Легко і ідеально для мене. Сподіваємось, це вам допоможе.
(Я знаю, що OP хочу лише CSS та HTML, але врахуйте jQuery)
Домовились з Меттом Кантором, використовуючи дані attr. Відредагована відповідь вище
data-href
або дещо.
<table class='tr_link' >
і передайте його .tr_link{cursor:pointer}
в css для найкращого використання.
tr[data-href] { cursor: pointer }
до своїх таблиць стилів
Якщо ви переглядаєте браузер, який його підтримує, ви можете використовувати 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>
Якщо вам доведеться використовувати таблицю, ви можете помістити посилання в кожну клітинку таблиці:
<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 */
}
Звичайний спосіб - призначити деякий JavaScript onClick
атрибуту TR
елемента.
Якщо ви не можете використовувати JavaScript, то ви повинні використовувати фокус:
Додайте однакове посилання до кожного TD
того ж рядка (посилання має бути самим зовнішнім елементом у комірці).
Перетворіть посилання на елементи блоку: a { display: block; width: 100%; height: 100%; }
Останній змусить посилання заповнити всю клітинку, тож натискання будь-якого місця викликає посилання.
Ви не можете обернути <td>
елемент <a>
тегом, але ви можете виконати подібну функціональність, використовуючи onclick
подію для виклику функції. Приклад можна знайти тут , що - щось на зразок цієї функції:
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
І додайте його до таблиці так:
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
Відповідь від 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;
}
});
Приклад
Я знаю, що на це питання вже відповіли, але мені все ще не подобається рішення на цій сторінці. Для людей, які використовують 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>
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; } });
Коли я хочу імітувати 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, весь рядок (і це посилання) набуває стиль наведення курса, і він не може бачити, що існує кілька посилань.
Надія може комусь допомогти.
Фідл ТУТ
//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), який можна натискати.
Якщо у вас немає однієї комірки з якорним тегом, який заповнює всю клітинку.
І тоді вам не слід використовувати таблицю.
Прочитавши цю тему та деякі інші, я придумав таке рішення у 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 (шляхом його розміщення або використання обробників подій).
Мінус полягає в тому, що це не призведе до того, що ТР веде себе так, як посилання, як з дівками Редагувати: я працював з навігацією на клавіатурі, встановивши клавішу onkeydown, role та tabIndex, ви можете видалити цю частину, якщо потрібна лише миша. Вони не відображатимуть URL-адресу на панелі стану, якщо навести курсор.display: table;
, і вони не вибиратимуть клавіатуру або матимуть текст статусу.
Ви можете спеціально стилізувати посилання TR із селектором CSS "tr [href]".
У мене є інший шлях. Особливо, якщо вам потрібно опублікувати дані за допомогою 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, які сторінка, на якій ви збираєтесь, може читати та діяти.
Мені б дуже хотілося, щоб спосіб опублікування прямо до місця розташування вікна, але я не думаю, що це можливо.
Чи можете ви додати тег до рядка?
<tr><td>
<a href="./link.htm"></a>
</td></tr>
Це ти просиш?