Какой самый стандартный и совместимый способ превратить всю строку таблицы в ссылку? - PullRequest
Новая
       13

Какой самый стандартный и совместимый способ превратить всю строку таблицы в ссылку?

5 голосов
/ 20 мая 2010

Очевидно, что вы не можете просто окружить тег <tr> тегом <a> и назвать его днем;это неверно и даже не работает.Я видел используемый JavaScript, но что происходит с браузерами, которые не поддерживают JavaScript? Каков наилучший способ превратить всю строку таблицы <tr> в ссылку?

Редактировать: По запросу Lerxst, вот пример таблицы с несколькими строками: 

<table>
    <thead>
        <tr><th>Name</th><th>Number of widgets</th></tr>
    </thead>
    <tbody>
        <tr><td>Bob Smith</td><td>Three</td></tr>
        <tr><td>Chuck Norris</td><td>Infinity+1</td></tr>
    </tbody>
</table>

Ответы [ 5 ]

4 голосов
/ 20 мая 2010

Я бы предпочел поместить ссылку в наиболее логичную для нее ячейку (вероятно, имя), а затем добавить обработчик событий в соответствии с: 

 tr.onclick = function (e) {
     location.href = this.getElementsByTagName('a')[0].href;
 }

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

Более эффективно присоедините обработчик событий к таблице и используйте объект события, чтобы найти элемент с помощью щелчка, а затем подниматься по дереву родителей, пока он не достигнет строки.Это, вероятно, лучше всего достигается с помощью библиотеки, такой как YUI или jQuery.

1 голос
/ 13 августа 2012

Если вы готовы отказаться от ТАБЛИЦЫ, приведенное ниже решение является наиболее простым и не требует JavaScript: 

<style type="text/css">
.table {
    border-collapse:collapse;
    border-spacing:0;
    display:table;
}
 .table .row {
    display:table-row;
}
 .table .cell {
    display:table-cell;
}    
</style>

<section class="table">
  <a class="row" href="#">
    <div class="cell">
      A
    </div>
    <div class="cell">
      B
    </div>
    <div class="cell">
      C
    </div>
  </a>
</section>
1 голос
/ 20 мая 2010

Без поддержки Javascript вы просто не сможете. Ссылка - это ссылка, а строка таблицы - это строка таблицы (то есть <a> - это <a>, а <tr> - это <tr>). Строки таблицы и большинство других элементов разметки не имеют "естественного" поведения, похожего на ссылку. Лучшее, что вы можете сделать, это заполнить все ячейки таблицы тегами <a> вокруг содержимого. edit: Обратите внимание, что вы хотите настроить стили так, чтобы теги <a> были расположены так, чтобы они полностью заполняли ячейки таблицы; возможно сделайте их display: block для начинающих.

Или вы можете использовать Javascript.

0 голосов
/ 20 мая 2010 
<html><head>
    <style type="text/css">
    table a { display: block; }
    table a:hover { background: yellow; }
    .name { display: block; float: left; width: 300px; }
    </style>

</head><body>
        <table>
        <thead>
            <tr><th class="name">Name</th><th>Number of widgets</th></tr>
        </thead>
        <tbody>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
        </tbody>
    </table>

</body></html>
0 голосов
/ 20 мая 2010

LINK

в значительной степени вы создаете видимость того, что строка действует как ссылка, когда CSS меняет цвета для отображения ссылок и создает при наведении мыши и на события клика, которые реагируют и перенаправляют на соответствующее изменение, ссылка объясняет, как это сделать что

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

...