Каков самый стандартный и совместимый способ превратить целую строку таблицы в ссылку?
Очевидно, Вы не можете просто окружить <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>
4 ответа
Я бы предпочел поместить ссылку в наиболее логичную для нее ячейку (вероятно, в название), а затем добавить обработчик событий следующего содержания:
tr.onclick = function (e) {
location.href = this.getElementsByTagName('a')[0].href;
}
Клиенты, не использующие JS, по-прежнему смогут использовать обычную ссылку.
Более эффективно прикрепить обработчик события к таблице и использовать объект события для поиска элемента с щелчком мыши, а затем подниматься вверх по дереву родителей, пока не попадет в строку. Этого, вероятно, лучше всего добиться с помощью такой библиотеки, как YUI или jQuery.
В основном вы создаете видимость того, что строка действует как ссылка, с помощью CSS меняя цвета для отображения ссылок и создавая события при наведении мыши и клике, которые реагируют и перенаправляют на соответствующее изменение, ссылка объясняет, как это сделать
В качестве запасного варианта можно добавить тег link в код, если JS недоступен, таким образом люди без JS могут использовать ссылку, включенную в строку. таким образом у вас есть запасной вариант
Без поддержки Javascript вы просто не сможете. Ссылка - это ссылка, а строка таблицы - это строка таблицы (то есть Или вы можете использовать Javascript. - это и представляет собой ). Строки таблицы и большинство других элементов разметки не имеют «естественного» поведения, подобного ссылкам. Лучшее, что вы можете сделать, - это заполнить все ячейки таблицы тегами вокруг содержимого. edit: Обратите внимание, что вам нужно настроить стили так, чтобы теги располагались так, чтобы они полностью заполняли ячейки таблицы; может быть, для начала сделать их display: block .
<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>
Похожие вопросы: