Wie macht man eine ganze Zeile in einer Tabelle als Link anklickbar?

Question

Ich benutze Bootstrap und das Folgende funktioniert nicht:

            Blah Blah
            1234567
            £158,000

Answer 1

Es gibt einen eleganten Weg, dies technisch mit dem -Tag innerhalb des -Tags zu tun, was semantisch möglicherweise inkorrekt ist (es könnte eine Browserwarnung geben), aber ohne JavaScript/jQuery funktioniert:

Blah Blah 1234567 £158,000 `

/ CSS / .bs-table-row { position: 'relative'; }

.bs-row-link { position: 'absolute'; left: 0; height: '36px'; // oder eine andere Zeilenhöhe basierend auf Ihren Anforderungen width: '100%'; cursor: 'pointer'; }`

PS: Beachten Sie den Trick hier, das -Tag als letztes Element zu setzen, da es sonst versuchen würde, den Platz der ersten -Zelle einzunehmen.

PPS: Jetzt ist Ihre gesamte Zeile klickbar und Sie können diesen Link auch verwenden, um ihn in einem neuen Tab zu öffnen (Strg/CMD+klicken)

Answer 2

Eine sehr einfache Option ist einfach onclick zu verwenden, und meiner Meinung nach korrekter, da dies die Ansicht und den Controller trennt und Sie die URL oder was auch immer Sie mit dem Klick erreichen möchten nicht fest codieren müssen. Es funktioniert auch mit Angular ng-click.

    Klicken Sie, um den Zeilenindex anzuzeigen

function myFunction(x) {
    alert("Zeilenindex ist: " + x.rowIndex);
}

Beispiel funktioniert hier

Answer 3

Sie können die onclick-JavaScript-Methode in tr verwenden und sie klickbar machen. Wenn Sie Ihren Link aufgrund einiger Details erstellen müssen, können Sie eine Funktion in JavaScript deklarieren und sie beim onclick aufrufen, wobei Sie einige Werte übergeben.

Answer 4

Hier ist eine Möglichkeit, indem ein transparentes A-Element über den Tabellenzeilen platziert wird. Vorteile sind:

• ist ein echtes Link-Element: bei Hover ändert sich der Zeiger, zeigt den Ziel-Link in der Statusleiste an, kann mit der Tastatur navigiert werden, kann in einem neuen Tab oder Fenster geöffnet werden, die URL kann kopiert werden, usw.
• die Tabelle sieht genauso aus wie ohne den hinzugefügten Link
• keine Änderungen im Tabellencode selbst

Nachteile:

• Die Größe des A-Elements muss in einem Skript festgelegt werden, sowohl bei der Erstellung als auch nach Änderungen an der Größe der abgedeckten Zeile (sonst könnte dies komplett ohne JavaScript erledigt werden, was immer noch möglich ist, wenn auch die Tabellengröße in HTML oder CSS festgelegt ist)

Die Tabelle bleibt wie sie ist:

            Blah Blah
            1234567
            £158,000

Fügen Sie die Links (für jede Zeile) über jQuery JavaScript ein, indem Sie ein A-Element in jede erste Spalte einfügen und die erforderlichen Eigenschaften festlegen:

// v1, angepasst für IE und Chrome
// v0, funktionierte nur in Firefox
// Breite für die Anpassung der Breite des A-Elements benötigt
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// Debug: .css('background-color', '#f11');
    // Füge das  Element ein
    var myA=$('');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', Rand nur für Debug
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

Das Setzen von Breite und Höhe kann schwierig sein, wenn viele Abstände und Ränder verwendet werden, aber im Allgemeinen sollte es nicht einmal wichtig sein, wenn ein paar Pixel daneben liegen.

Live-Demo hier: http://jsfiddle.net/qo0dx0oo/ (funktioniert in Firefox, aber nicht in IE oder Chrome, dort ist der Link falsch positioniert)

Angepasst für Chrome und IE (funktioniert immer noch in FF): http://jsfiddle.net/qo0dx0oo/2/

Answer 5

Dieser Code unten macht Ihre gesamte Tabelle klickbar. Wenn Sie in diesem Beispiel auf die Links klicken, wird der Link in einem Alert-Dialog angezeigt, anstatt dem Link zu folgen.

Der HTML-Code:

Hier ist der HTML-Code hinter dem obigen Beispiel:

      
     Name
     Beschreibung
     Preis

     Bearbeiten
     Äpfel
     Blah blah blah blah
     10,23

     Bearbeiten
     Bananen
     Blah blah blah blah
     11,45

     Bearbeiten
     Orangen
     Blah blah blah blah
     12,56

Die CSS-Stile

Und das CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

Das jQuery-Skript

Und schließlich das jQuery, das den Zauber bewirkt:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

Was passiert, ist: Wenn eine Zeile angeklickt wird, wird nach dem href gesucht, der zu einem Anker gehört. Wenn einer gefunden wird, wird die Position des Fensters auf diesen href gesetzt.