Хотите сделать всю ячейку TD якорем - PullRequest
Новая
       14

Хотите сделать всю ячейку TD якорем

4 голосов
/ 10 апреля 2011

У меня есть <table>, где каждый <td> содержит только якорь.Я бы хотел, чтобы пользователи могли щелкать в любом месте ячейки, чтобы перейти по этой ссылке, а не только к самому тексту привязки.Я предполагаю, что должно быть немного jQuery, чтобы сделать это легко.Кто-нибудь может помочь?

Редактировать: Чтобы усложнить ситуацию, мои td имеют некоторые верхние и нижние отступы.Правило display: block;, похоже, не работает в этом случае.Я отредактировал пример:

CSS: 

table#mainmenu td {
    padding: 9px 8px 5px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-left: 1px dotted; 
    text-align: left;
}

Пример: 

<table>
<tr>
  <td><a href="foo.html">Foo</a></td>
  <td><a href="bar.html">Bar</a></td>
</tr>
<tr>
  <td><a href="foobar.html">FooBar</a></td>
  <td><a href="barfoo.html">BarFoo</a></td>
</tr>
</table>

Ответы [ 3 ]

15 голосов
/ 10 апреля 2011

Просто сделайте тег A display: block. 

table td a {
  display: block;
}

http://jsfiddle.net/userdude/6VZ8t/

Или, если вы настаиваете на jQuery: 

$('table td a').css('display','block');

http://jsfiddle.net/userdude/a2EAz/

EDIT

Поскольку я не смог найти способ выбора родительского TD для дочернего элемента A только для CSS, в этом решении используется jQuery: 

function doTablePadding() {
    $td = $('table td');
    $td.has('a').css('padding','0');
    padding = $td.not(':has(a)').css('padding-top') + " ";
    padding += $td.not(':has(a)').css('padding-right') + " ";
    padding += $td.not(':has(a)').css('padding-bottom') + " ";
    padding += $td.not(':has(a)').css('padding-left') + " ";
    $td.children('a').css('padding',padding);
}
doTablePadding();
$('table tbody').append("<tr><td>Stuff</td><td><p>Other stuff</p></td></tr>");
$('table tbody').append('<tr><td><a href="foo.html">Foo</a></td><td><a href="bar.html">Bar</a></td></tr>');
doTablePadding();

http://jsfiddle.net/userdude/Mekjg/1

Обратите внимание, что это работает с $(document).ready();.

РЕДАКТИРОВАТЬ 2

Поскольку mu слишком короткие примечания, отрицательные поля должны работать (и не jQuery): 

td {
    padding: 5px;
    background: #0ff;
    border: 1px solid black;
}
td a {
    display: block;
    margin: -5px;
    padding: 5px;
    background: #f0f;
}

http://jsfiddle.net/ambiguous/seqpp/

1 голос
/ 10 апреля 2011 
$(function(){
   $('td').click(function(){
    window.location = $("a", this).attr("href");
  });
})

Демо: http://jsfiddle.net/rarTf/

0 голосов
/ 10 апреля 2011

просто сделать CSS как

table td {cursor: pointer;}

и создайте скрипт как

$ ('table td'). Click (function () {window.location.href = $ ('a', this) .attr ('href');});

...