it-swarm.com.de

wie kann man eine ganze Zeile in einer Tabelle als Link anklickbar machen?

Ich benutze Bootstrap und folgendes funktioniert nicht:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>
339
user1038814

Sie verwenden Bootstrap, was bedeutet, dass Sie jQuery verwenden: ^). Eine Möglichkeit, dies zu tun, ist:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

Natürlich müssen Sie keine href- oder switch-Positionen verwenden. Sie können in der Click-Handler-Funktion nach Belieben arbeiten. Informieren Sie sich über jQuery und wie Sie Handler schreiben. 

Die Verwendung von class over id hat den Vorteil, dass Sie die Lösung auf mehrere Zeilen anwenden können:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

und Ihre Codebasis ändert sich nicht. Derselbe Handler würde sich um alle Zeilen kümmern.

Andere Option

Sie können Bootstrap-jQuery-Callbacks wie folgt verwenden (in einem document.ready-Callback):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

Dies hat den Vorteil, dass es beim Sortieren der Tabelle nicht zurückgesetzt wird (was bei der anderen Option der Fall ist).


Hinweis

Da dies veröffentlicht wurde, ist window.document.location veraltet (oder zumindest veraltet), verwenden Sie stattdessen window.location.

496
Ahmed Masud

Das kannst du nicht machen. Es ist ungültiges HTML. Sie können keinen <a> zwischen einem <tbody> und einem <tr> einfügen. Versuchen Sie es stattdessen:

<tr onclick="window.location='#';">
   ...
</tr>

Wenn Sie daran arbeiten, möchten Sie den Click-Handler mit JavaScript außerhalb des HTML-Codes zuweisen.

178
davidfurber

Sie könnten einen Anker in jeden <td> einfügen, wie folgt:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

Sie könnten dann display:block; an den Ankern verwenden, um die gesamte Zeile anklickbar zu machen.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

Beispiel jsFiddle hier.

Dies ist wahrscheinlich so optimal, wie Sie es bekommen werden, wenn Sie nicht auf JavaScript zurückgreifen.

144
lifetimes

Ja, aber nicht mit den Standardelementen von <table>. Wenn Sie die display: table-Stileigenschaften verwenden, können Sie dies tun. Hier und Hier sind einige Geigen zu demonstrieren. 

Dieser Code sollte den Trick tun:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}
<link href="https://stackpath.bootstrapcdn.com/Twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div class="table">
  <div class="row">
    <div class="cell">
      1.1
    </div>
    <div class="cell">
      1.2
    </div>
    <div class="cell">
      1.3
    </div>
  </div>

  <a class="row" href="#">
    <div class="cell">
      2.1
    </div>
    <div class="cell">
      2.2
    </div>
    <div class="cell">
      2.3
    </div>
  </a>
</div>

Beachten Sie, dass Aria-Rollen verwendet werden, um einen ordnungsgemäßen Zugriff zu gewährleisten, da die Standardelemente <table> nicht verwendet werden. Eventuell müssen Sie zusätzliche Rollen wie role="columnheader" hinzufügen. Weitere Informationen finden Sie in der folgenden Anleitung hier .

75
Trevin Avery

Eine viel flexiblere Lösung besteht darin, mit dem data-href-Attribut auf alles zu zielen. Dies ist, Sie können den Code leicht an verschiedenen Orten wiederverwenden. 

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

Dann zielen Sie in Ihrer jQuery einfach auf jedes Element mit diesem Attribut:

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

Und vergessen Sie nicht, Ihre CSS zu gestalten:

[data-href] {
    cursor: pointer;
}

Jetzt können Sie das data-href-Attribut zu jedem Element hinzufügen und es wird funktionieren. Wenn ich Ausschnitte wie diese schreibe, mag ich sie flexibel. Fühlen Sie sich frei, eine Vanilla Js-Lösung hinzuzufügen, wenn Sie eine haben. 

8
AbdelElrafa

Sie können diese Bootstrap-Komponente verwenden:

http://jasny.github.io/bootstrap/javascript/#rowlink

Jasny Bootstrap

Die fehlenden Komponenten für Ihr bevorzugtes Frontend-Framework.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

Verwendungszweck

Über Datenattribute

Fügen Sie die Klasse .rowlink und das Attribut data-link="row" einem <table>- oder <tbody>-Element hinzu. Für andere Optionen hängt der Name an data- an, wie in data-target="a.mainlink". Eine Zelle kann ausgeschlossen werden, indem die .rowlink-skip-Klasse zum <td> hinzugefügt wird.

Über JavaScript

Rufen Sie die Eingabemaske über Javascript auf:

$('tbody.rowlink').rowlink()
6
phlegx

Sie können die Onclick-Javascript-Methode in tr verwenden und sie anklickbar machen. Auch wenn Sie aufgrund einiger Details einen Link erstellen müssen, können Sie eine Funktion in Javascript deklarieren und in Onclick aufrufen.

5
Anahit Serobyan

Es gibt eine gute Möglichkeit, dies technisch mit dem <a>-Tag in <tr> zu tun, das semantisch nicht korrekt sein kann (möglicherweise eine Browser-Warnung), jedoch ohne JavaScript/jQuery ausgeführt werden kann:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

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

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS: Beachten Sie, dass der Trick darin besteht, das <a>-Tag als letztes Element zu setzen. Andernfalls wird versucht, den Speicherplatz der ersten <td>-Zelle einzunehmen.

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

5
Ronen

Hier ist eine Möglichkeit, indem Sie ein transparentes A-Element über die Tabellenzeilen legen. Vorteile sind:

  • ist ein echtes Linkelement: Wenn der Mauszeiger den Zeiger ändert, zeigt er den Ziellink in der Statusleiste, kann über die 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 am Tabellencode selbst

Nachteile:

  • die Größe des A-Elements muss in einem Skript festgelegt werden, und zwar sowohl bei der Erstellung als auch nach jeder Änderung der Größe der Zeile, für die es gilt. Andernfalls könnte dies ohne JavaScript erfolgen. Dies ist auch möglich, wenn die Tabellengröße ebenfalls festgelegt wird in HTML oder CSS)

Der Tisch bleibt so wie er ist:

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

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

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

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

Die Einstellung für Breite und Höhe kann schwierig sein, wenn viele Füllungen und Ränder verwendet werden, aber im Allgemeinen sollten einige Pixel nicht ausreichen.

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

Behoben für Chrome und IE (funktioniert auch in FF): http://jsfiddle.net/qo0dx0oo/2/

4
David Balažic

Ich weiß, dass jemand schon ziemlich dasselbe geschrieben hat, aber mein Weg ist der richtige Weg (div kann kein Kind von A sein) und es ist auch besser, Klassen zu verwenden.

Sie können eine Tabelle mit CSS imitieren und ein A-Element zur Zeile machen

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

css:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
3
Sidupac

Eine weitere Option mit einem <a>, CSS-Positionen und etwas jQuery oder JS :

HTML: 

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

Dann müssen Sie die Breite angeben, beispielsweise mit jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });
3
Yisela

Dieser Code macht Ihre gesamte Tabelle anklickbar. Wenn Sie auf die Links in diesem Beispiel klicken, wird der Link in einem Warnungsdialogfeld angezeigt, anstatt dem Link zu folgen.

Das HTML:

Hier ist der HTML-Code hinter dem obigen Beispiel:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

Das CSS

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

Die jQuery

Und zum Schluss noch die jQuery, die die Magie möglich macht:

    $(document).ready(function() {

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

});

Wenn eine Zeile angeklickt wird, wird nach der Href gesucht, die zu einem Anker gehört. Wenn eine gefunden wird, wird die Position des Fensters auf diese href gesetzt.

3
Aydan Aleydin

Sie können die Schaltflächenrolle zu einer Tabellenzeile hinzufügen, und Bootstrap ändert den Cursor ohne CSS-Änderungen. Ich entschied mich dazu, diese Rolle zu nutzen, um jede Zeile mit sehr wenig Code anklickbar zu machen.

Html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

Sie können dieses Prinzip auch anwenden, um die Schaltflächenrolle zu einem Tag hinzuzufügen.

2
Todd Skelton

ich würde es vorziehen, das Attribut onclick="" zu verwenden, da es für Anfänger wie einfach zu verwenden und zu verstehen ist

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>
2
Ali Raza

Die akzeptierte Antwort ist großartig, aber ich schlage eine kleine Alternative vor, wenn Sie die URL nicht für jedes tr.__ wiederholen möchten. Sie setzen also die URL oder href in die Tabelle data-url und nicht das tr.

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

Dies ist auch gut, weil Sie das Klickdatenattribut nicht jedem tr hinzufügen müssen. Die andere gute Sache ist, dass wir keine Klasse verwenden, um einen Klick auszulösen, da Klassen wirklich nur für das Styling verwendet werden sollten.

1
Thomas Williams

Eine sehr einfache Option (funktioniert auch mit Angular-Klick):

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

Beispiel arbeiten hier

1
Wendell Pereira

Wird mit Standard Bootstrap 4.3+ wie folgt erreicht - es werden weder jQuery noch zusätzliche CSS-Klassen benötigt!

Der Schlüssel ist, stretched-link für den Text in der Zelle zu verwenden und <tr> als enthaltenden Block zu definieren.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@Twitter</td>
    </tr>
  </tbody>
</table>

Sie können umschließenden Block auf unterschiedliche Weise beispielsweise Einstellung transform keinen nicht-Wert (wie im Beispiel oben) definieren.

Weitere Informationen finden Sie in der Bootstrap-Dokumentation für stretched-link.

0
Krishna Gupta

Hier ist ein anderer Weg ...

Das HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

Die jQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});
0
klewis

Ich habe viel Zeit investiert, um dieses Problem nur mit HTML zu lösen. Dies bedeutet, dass <a> unter jedem <td> verschachtelt ist. Noch kein Erfolg.

Das Hauptproblem bei diesem Ansatz ist, dass die <a> -Höhe für jede Spalte unterschiedlich sein kann. Sie können das an der Geige sehen, die von @midstack weiter oben auf dieser Seite vorgeschlagen wurde. Die anklickbare Fläche muss also nicht für jede Spalte gleich sein. Dies ist ein ernstes Problem von UX.

Ich habe 2 Möglichkeiten gefunden, um dieses Problem zu lösen, keine davon ist ideal.

a) Setzen Sie <td> auf { display: contents; }. Dies führt zu zwei weiteren Problemen:

  1. Wenn jemand anderes versucht, das <td> -Tag direkt zu formatieren, wie zum Beispiel { width: 20px; }, müssen wir diesen Stil irgendwie an das <a> -Tag übergeben. Dazu brauchen wir etwas Magie, wahrscheinlich mehr Magie als in der Javascript-Alternative.

  2. { display: contents; } ist noch experimentell; Insbesondere wird es von Edge nicht unterstützt.

b) Setzen Sie <td> auf { height: --some-fixed-value; }. Das ist einfach nicht flexibel genug.

0
gamliela
<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

Die Hauptlösung hier ist zwar großartig, aber meine Lösung macht den Unterricht überflüssig. Sie müssen lediglich das data-href-Attribut mit der URL hinzufügen.

0

Sie könnten der Zeile eine ID geben, z.

<tr id="special"> ... </tr>

und dann benutze jquery um etwas zu sagen wie:

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

0
Peter Berg