Wollen ganze TD-Zelle ein Anker

Ich habe eine <table> wo jeder <td> hält nur ein Anker. Ich möchte den Benutzern die klicken Sie an beliebiger Stelle in der Zelle zu besuchen, die Referenz anstatt nur auf dem Anker-text selbst. Ich vorstellen, es muss ein bisschen jQuery, diese einfach zu tun. Kann mir jemand helfen?

Edit:, Um die Dinge zu komplizieren, mein td's haben einige top-und bottom-padding. Ein display: block; Regel scheint nicht zu funktionieren in diesem Fall. Ich habe bearbeitet Beispiel:

CSS:

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

Beispiel:

<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>

jQuery? Warum nicht CSS?
da jQuery ist toll und tut alle Dinge.
Fernandes: Wahrheit.
Weil ich nicht erkennen, es war so einfach. 🙂
Keine Sorge, ich habe auch über Gedanken, Probleme, wie dies vor. Es ist viel einfacher als jQuery-in diesem Fall den Einsatz von CSS.
Display: block ist einfach nur für den A-tag erweitern, um den gesamten Inhalt der TD (abzüglich der TD das padding). Sie werden immer noch auf display: block, Sie brauchen nur zu berücksichtigen, für die Polsterung der mit TD als gut.

InformationsquelleAutor Rich | 2011-04-10

15

Nur den Einen tag display: block.
```
table td a {
  display: block;
}
```
http://jsfiddle.net/userdude/6VZ8t/

Oder, wenn Sie darauf bestehen, auf jQuery:
```
$('table td a').css('display','block');
```
http://jsfiddle.net/userdude/a2EAz/

BEARBEITEN

Da war ich nicht in der Lage zu finden, eine CSS-only können Sie eine übergeordnete TD Kind Ein, diese Lösung nutzt 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

Beachten Sie, dass diese ausgeführt wird, aus $(document).ready();.

EDIT 2

Als mu ist zu kurz Noten, negative Margen funktionieren sollte (und kein 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/
- Dank jQuery ist übertrieben an dieser Stelle.
- Tatsächlich, das hat nicht funktioniert als ich erwartet hatte. Ich habe die Polsterung in meinen Zellen und die block-Anzeige fließt nicht zu Ihnen. (Sorry, das ist komplizierter als ich dachte).
- Es ist in diesem Fall nicht notwendig ist alle; viel einfacher mit CSS. Zum Beispiel, wenn Sie verwendet jQuery, würden Sie dann stellen Sie sicher, und rufen Sie die jQuery-code auf die Seite laden und dann jederzeit später, wenn die Informationen aktualisiert.
- Könnte Sie nach Ihrem tatsächlichen Tabellen-code in diesem Fall?
- Auch kann man mit der Polsterung aus den TD-Zellen und fügen Sie es auf das A-tag statt.
- geschrieben, ja, schieben Sie das Polster, um das A-tag funktioniert auch, aber ich möchte die Polsterung auf die Zellen, auch wenn Sie nicht enthalten eine Eine tag. Sorry, ich wusste nicht, es wäre das zu kompliziert.
- Siehe mein edit.
- Sie möchten die <a>s-block angezeigt, fügen Sie negative Margen zu überwinden, die <td>s-Polsterung, setzen Sie dann die Polsterung im inneren der <a>: jsfiddle.net/ambiguous/seqpp
- Danke, ich dachte über negative margins... (wirklich) ich war gerade aufgehängt auf Selektoren.
- Wenn Sie brauchen, um jQuery verwenden aus irgendeinem Grund, ich aktualisiert die jQuery-code-Konto für alle Polster, nicht nur padding-left. Wenn Sie verwenden, werden Sie brauchen, rufen Sie es jedes mal, wenn Sie ändern die Tabelle selbst (zum Beispiel, bei der Verwendung von append()).
- Danke @Jürgen und @mu. Ich ging der CSS-Weg.
InformationsquelleAutor Jared Farrish

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

Demo: http://jsfiddle.net/rarTf/

InformationsquelleAutor fl00r

0

machen nur die css als

Tabelle td {
cursor: pointer;
}

machen und Skript als

$('Tabelle td').klicken Sie auf(Funktion(){
Fenster.Lage.href=$('a',this).attr('href');
});

InformationsquelleAutor arun

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.