Обтекание строк таблицы HTML в тегах

Ответ 1

как ссылка в каждом td не является хорошей альтернативой, а использование js немного грязно, вот еще один подход html/css:

HTML:

<div class="table">
    <a class="table-row" href="/mylink">
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
    </a>
</div>

CSS

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

Ответ 2

Это делает так, потому что браузер соблюдает спецификацию W3C и разрешает теги <tr> как прямые потомки <table>.

В качестве решения вы можете поместить тег <a> внутри каждого <td>, который указывает на тот же URL-адрес:

<table>
    <tr>
        <td>
            <a href="http://url/stuff">
                First column
            </a>
        </td>
        <td>
            <a href="http://url/stuff">
                Second column
            </a>
        </td>
    </tr>
</table>

Или вы можете привязать обработчик onClick к <tr> с помощью JavaScript. Пример jQuery будет следующим:

$('table tr').click(function() {
    window.location = 'http://location/here';
});

Или, что еще лучше, используйте делегированные события (jQuery 1.7 +):

$('table').on('click', 'tr', function() {
    window.location = 'http://location/here';
});

Ответ 3

Еще одно простое решение только для CSS превращает <a> в элементы блока

<tr>
  <td><a href="#">name 1</a></td><td><a href="#">link 1</a></td>    
</tr>
<tr>
  <td><a href="#">name 2</a></td><td><a href="#">link 2</a></td>    
</tr>

CSS:

td > a {
  display: block;
}

Затем <a> займет весь <td> и сделает целую строку кликабельной без JS, если ссылка повторяется для каждой ячейки в строке.

https://jsfiddle.net/evwa451n/

Ответ 4

Недействительный HTML для любых элементов, отличных от thead, tbody или tfoot, как прямого дочернего элемента table, и эти элементы имеют только tr как их допустимые дочерние элементы.

Любое другое содержимое должно быть в пределах td или th для правильности.

Что вы видите, так это браузер, реструктурирующий вашу DOM, чтобы он был как можно более действенным. Проблема, связанная с этим поведением, заключается в том, что разные браузеры реагируют по-разному.

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

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

Для интерактивных строк таблицы одно решение (в обычном JavaScript):

var rows = document.getElementsByTagName('tr'),
    url;

for (var i=0,len=rows.length; i<len; i++){
    rows[i].onclick = function(){
        uri = this.getAttribute('data-url');
        window.location = uri;
    };
}

JS Fiddle demo.

(что, очевидно, требует, чтобы элементы tr имели атрибут data-url, чтобы указать, куда они должны ссылаться.)

Ответ 5

Почему вы не хотите делать события click на tr? Невозможно создать якорный тег, как вы хотите, чтобы вы могли сделать событие click и добавить дополнительный CSS, чтобы сделать его похожим на якорь.

Jquery:

$("table tr").click(function() {
    window.location = "http://www.google.com/";
});

Ответ 6

Вы можете использовать onclick, чтобы вы могли динамически получать контент

<td onclick="window.location='http://www.google.com';" style='cursor: pointer;'>Hello</td>

http://jsfiddle.net/ankJw/

Ответ 7

В дополнение к другим, я должен добавить, что я лично предпочитаю делать это

<tr onclick="window.location='http://www.google.com';" >
  <td>Text...</td>
</tr>

в случае ASP.NET MVC сделать это как

<tr onclick="window.location = '@Url.RouteUrl("Product", new { SeName = @product.SeName })';">