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

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

1527   15  

15 ответов:

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

  • С помощью 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;
}

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

160  
2014-04-10 03:41:02

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

Html

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

jQuery

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

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

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

Edit

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

51  
2015-11-18 18:46:41

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

25  
2009-09-22 19:07:18

обычный способ-назначить некоторый JavaScript для на TR элемент.

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

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

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

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

11  
2009-09-22 19:00:03

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

<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 */
}
10  
2009-09-22 19:19:50

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

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

и добавьте его к своей таблице следующим образом:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
6  
2009-09-22 19:04:31

ответ сэр Уильям подходит мне лучше всего. Я улучшил 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/

6  
2015-02-26 13:47:45

Я знаю, что на этот вопрос уже дан ответ, но мне все еще не нравится какое-либо решение на этой странице. Для людей, которые используют 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>
3  
2018-05-04 12:59:23

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

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
1  
2012-11-02 06:42:39

когда я хочу сымитировать <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  
2018-02-01 18:40:11 
//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  
2009-09-22 19:00:25

после прочтения этой темы и некоторых других я придумал следующее решение в 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/td / th, который вы хотите быть кликабельным, например: <tr href="http://stackoverflow.com">. И убедитесь, что приведенный выше скрипт выполняется после создания элемента tr (путем его размещения или с помощью обработчиков событий).

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

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

0  
2016-10-20 11:03:06

У меня есть другой способ. Особенно, если вам нужно отправить данные с помощью 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 устанавливает переменные в сеансах, которые страница, которую вы собираетесь читать и действовать.

Я люблю способ размещения прямо на месте окна, но я не думаю, что это возможно.

0  
2017-01-27 17:34:27

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

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

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

<style>
    .pointer { cursor: pointer; }
</style>
0  
2018-02-07 21:34:14

можете ли вы добавить тег A в строку?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

это то, что ты просишь?

-2  
2009-09-22 18:58:10

Comments

    Ничего не найдено.
Click here to cancel reply.