it-swarm.com.de

hTML - Tabellenzeile wie ein Link

Ich kann meine Tabellenzeile nicht als Link zu etwas festlegen. Ich kann nur css und html verwenden. Ich habe verschiedene Dinge von div in row zu etwas anderem ausprobiert, kann es aber trotzdem nicht machen.

93
Max Frai

Sie haben zwei Möglichkeiten, dies zu tun:

  • Mit Javascript: 

    <tr onclick="document.location = 'links.html';">

  • Verwendung von Ankern:

    <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

Ich habe die zweite Arbeit gemacht mit:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

So entfernen Sie den Totraum zwischen den Spalten:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Hier ist eine einfache Demo des zweiten Beispiels: DEMO

163
Esteban Küber

Ich habe mir eine benutzerdefinierte Jquery-Funktion gemacht:

Html

<tr data-href="site.com/whatever">

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

Einfach und perfekt für mich. Hoffentlich hilft es dir.

(Ich weiß, dass OP nur CSS und HTML verwenden möchte, aber jQuery in Betracht zieht.)

Bearbeiten

Mit Matt Kantor vereinbart mit data attr. Antwort oben bearbeitet

52

Wenn Sie sich in einem Browser befinden, der dies unterstützt, können Sie mithilfe von CSS den <a> in eine Tabellenzeile umwandeln:

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

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Natürlich können Sie keine Blockelemente in den <a>..__ einfügen. Sie können dies auch nicht mit einem normalen <table> mischen

26
Greg

Wenn Sie müssen eine Tabelle verwenden, können Sie in jede Tabellenzelle einen Link einfügen:

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

Und lassen Sie die Links die gesamten Zellen ausfüllen:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

Wenn Sie <div>s anstelle einer Tabelle verwenden können, kann Ihr HTML-Code sehr viel einfacher sein und Sie erhalten keine "Lücken" in den Links zwischen den Tabellenzellen:

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

Hier ist das CSS, das zur <div>-Methode passt:

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}
12
system PAUSE

Normalerweise weisen Sie dem onClick-Attribut des TR-Elements etwas JavaScript zu.

Wenn Sie kein JavaScript verwenden können, müssen Sie einen Trick verwenden:

  1. Fügen Sie jeder TD derselben Zeile den gleichen Link hinzu (der Link muss das äußerste Element in der Zelle sein).

  2. Verwandeln Sie Links in Blockelemente: a { display: block; width: 100%; height: 100%; }

Letzteres zwingt die Verknüpfung dazu, die gesamte Zelle auszufüllen, sodass durch Klicken auf eine beliebige Stelle die Verknüpfung aufgerufen wird.

12
Aaron Digulla

Sie können ein <td>-Element nicht mit einem <a>-Tag umschließen. Sie können jedoch ähnliche Funktionen ausführen, indem Sie mit dem onclick-Ereignis eine Funktion aufrufen. Ein Beispiel ist here , etwa die folgende Funktion:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

Und füge es so zu deinem Tisch hinzu:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
7
Donut

Die Antwort von Sirwilliam passt am besten zu mir. Ich habe das Javascript mit Unterstützung für Hotkey Ctrl + LeftClick verbessert (öffnet Seite in neuem Tab). Das Ereignis ctrlKey wird vom PC verwendet, metaKey vom Mac.

Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

Beispiel

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

6

Ich weiß, dass diese Frage bereits beantwortet wurde, aber ich mag immer noch keine Lösung auf dieser Seite. Für die Leute, die JQuery verwenden, habe ich eine endgültige Lösung entwickelt, mit der Sie der Tabellenzeile fast das gleiche Verhalten wie das <a>-Tag geben können. 

Das ist meine Lösung:

jQuery Sie können dies beispielsweise zu einer standardmäßig enthaltenen Javascript-Datei hinzufügen

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 1){
            window.location.href = url;
        }
        else if(click == 2){
            window.open(url, '_blank');
            window.focus();
        }
        return true;
    }
});

HTMLJetzt können Sie dies für jedes <tr>-Element in Ihrem HTML verwenden.

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>
4
botenvouwer

Dies erspart Ihnen, den Link in der Datei zu duplizieren. 

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
1
Will

Wenn ich einen <tr> mit einem Link simulieren möchte, aber die HTML-Standards respektiere, mache ich das.

HTML:

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS:

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

Auf diese Weise erhält die gesamte Zeile (und diese Links) den Schwebeflugstil, wenn jemand mit der Maus auf einen TR fährt, und er kann nicht erkennen, dass es mehrere Links gibt.

Hoffnung kann jemandem helfen. 

Geige HIER

1
sara_thepot

Ich habe einen anderen Weg. Vor allem, wenn Sie Daten mit jQuery veröffentlichen müssen

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

Set variable legt in SESSIONS Variablen fest, die die Seite lesen und bearbeiten kann.

Ich hätte gerne eine Möglichkeit, direkt an einem Fenster zu posten, aber ich denke nicht, dass dies möglich ist.

0
Thomas Williams

Danke dafür. Sie können das Hover-Symbol ändern, indem Sie der Zeile eine CSS-Klasse zuweisen:

<tr class="pointer" onclick="document.location = 'links.html';">

und das CSS sieht so aus:

<style>
    .pointer { cursor: pointer; }
</style>
0
tkrn

Nachdem ich diesen Thread und einige andere gelesen hatte, fand ich die folgende Lösung in Javascript:

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

Um es zu verwenden, setzen Sie die Datei href in tr/td/th, die Sie anklickbar machen möchten: <tr href="http://stackoverflow.com">. Stellen Sie sicher, dass das obige Skript ausgeführt wird, nachdem das tr-Element erstellt wurde (durch seine Platzierung oder durch Verwendung von Ereignisprozeduren).

Der Nachteil ist, dass die TRs sich nicht völlig wie Links wie bei divs mit display: table; verhalten und nicht über die Tastatur auswählbar sind oder Statustext haben. Bearbeiten: Ich habe die Tastaturnavigation durch Setzen von onkeydown, role und tabIndex zum Laufen gebracht. Sie können diesen Teil entfernen, wenn nur Maus erforderlich ist. Sie zeigen die URL jedoch nicht in der Statusleiste beim Schweben an.

Sie können die Link-TRs mit dem CSS-Selektor "tr [href]" speziell formatieren.

0
netman
//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Etwas in dieser Richtung vielleicht? Es wird zwar JS verwendet, aber das ist nur eine Möglichkeit, eine Zeile (tr) anklickbar zu machen.

Es sei denn, Sie haben eine einzelne Zelle mit einem Ankertag, der die gesamte Zelle ausfüllt.

Und dann sollten Sie sowieso keinen Tisch benutzen.

0
CaffGeek