html - строка таблицы как ссылка - PullRequest
Новая
       33

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

95 голосов
/ 22 сентября 2009

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

Ответы [ 15 ]

0 голосов
/ 07 февраля 2018

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

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

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

<style>
    .pointer { cursor: pointer; }
</style>
0 голосов
/ 27 января 2017

У меня есть другой способ. Особенно, если вам нужно опубликовать данные, используя 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 голосов
/ 20 октября 2016

Прочитав эту ветку и некоторые другие, я нашел следующее решение в 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 (путем его размещения или использования обработчиков событий).

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

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

0 голосов
/ 22 сентября 2009 
//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 голосов
/ 22 сентября 2009

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

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

Это то, что вы спрашиваете?

Страница:
...