jak sprawić, by cały wiersz w tabeli był klikalny jako link?


436

Korzystam z Bootstrap i następujące funkcje nie działają:

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

2
JavaScript może być lepszy do tego
John Conde

1
Używa bootstrapu, więc myślę, że powinien to zrobić :)
Ahmed Masud

Co powiesz na umieszczenie przezroczystego elementu A przed rzędem? W ten sposób miałby wszystkie właściwości prawdziwego łącza (pasek stanu, środkowe kliknięcie itp.), A także nie zmienia wyglądu tabeli (jeśli jest to pożądane).
David Balažic


Odpowiedzi:


568

Nota autora I:

Proszę spojrzeć na inne odpowiedzi poniżej, szczególnie te, które nie używają jquery.

Nota autora II:

Zachowane dla potomności, ale z pewnością niewłaściwe podejście w 2020 r. (Nie było idiomatyczne nawet w 2017 r.)

Oryginalna odpowiedź

Używasz Bootstrap, co oznacza, że ​​używasz jQuery: ^), więc jednym ze sposobów jest:

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

Oczywiście nie musisz używać href ani przełączać lokalizacji, możesz robić, co chcesz w funkcji obsługi kliknięć. Czytaj dalej jQueryi jak pisać programy obsługi;

Zaletą korzystania z klasy nad identyfikatorem jest to, że można zastosować rozwiązanie do wielu wierszy:

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

a baza kodu się nie zmienia. Ten sam przewodnik zająłby się wszystkimi rzędami.

Inna opcja

Możesz użyć wywołań zwrotnych jQuery Bootstrap w następujący sposób (w document.readywywołaniu zwrotnym):

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

Ma to tę zaletę, że nie jest resetowane podczas sortowania tabeli (co dzieje się w przypadku innej opcji).


Uwaga

Ponieważ ten post został opublikowany window.document.locationjest przestarzały (lub przynajmniej przestarzały) użyj window.locationzamiast niego.


105
Możesz także zmienić kursor za pomocą css: tr.clickableRow {kursor: wskaźnik; }
Winston Kotzan

78
Chciałem tylko dodać, że nie powinieneś używać hrefatrybutu na tr, ponieważ nie jest to prawidłowy atrybut dla tego elementu. Zamiast tego użyj atrybutów danych: data-url="{linkurl}"i w kodzie js:$(this).data('url')
Maksim Vi.

12
Możesz uniknąć używania klasy w każdym wierszu i ozdobić tabelę nazwą klasy clickable_row(CamelCase jest niezgodny ze standardami HTML i powinien być pisany małymi literami (miałem kilka problemów z przeglądarką kilka razy z tym)), a następnie jQuery jest $('.clickable_row tr').click(function ...Ale naprawdę powinieneś używać data-do przechowywania danych, zamiast tego, hrefponieważ taka jest specyfikacja danych niestandardowych. data-urli jquery uzyska do niej dostęp w następujący sposób$(this).data(url);
Piotr Kula

3
FYI: Jeśli możesz, powinieneś zostawić link gdzieś w tr dla osób, które mają wyłączoną obsługę Javascript.
hitautodestruct

47
Nie jest wielkim fanem tego rozwiązania, ponieważ użytkownicy nie widzą adresu URL linku na dole przeglądarki podczas najechania myszką, a co ważniejsze, nie mogą kliknąć linku, aby otworzyć go w nowej karcie. Wstawienie aznacznika z display: block;każdą komórką jest nieco denerwujące, ale wydaje się, że jest to najbardziej użyteczny sposób rozwiązania tego problemu.
Maxime Rossini,

222

Nie możesz tego zrobić. To jest nieprawidłowy HTML. Nie możesz wstawić <a>między <tbody>a a <tr>. Spróbuj zamiast tego:

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

dodaj styl do widoku wskaźnika

[data-href] { cursor: pointer; }

Kiedy nad tym pracujesz, możesz użyć JavaScript, aby przypisać moduł obsługi kliknięć poza HTML.


3
@Aquillo OP wyraźnie stwierdza, że ​​używa / używa bootstrap. więc rozwiązanie jQuery byłoby lepsze w ramach
Ahmed Masud

39
@AhmedMasud W tym przypadku tak. Chociaż dla przyszłych czytelników zwykłe JS może być lepszym rozwiązaniem. Ponieważ jest to celem Stackoverflow, nadal uważam mój komentarz za prawidłowy.
Menno

3
Z pewnością należy preferować oddzielenie zachowania i znaczników. Jeśli cokolwiek, powiedziałbym, że href nie jest prawidłowym atrybutem dla tr. Powinien zostać zastąpiony datownikiem i zastąp $ (this) .attr $ (this) .data.
davidfurber

1
Lub możesz sprawić, aby metoda wiązania zdarzeń klasy „.clickableRow” szukała pierwszego <a>w klikniętym wierszu. (to by również
uległo

3
Jeśli używasz składni ES6, możesz wykonać kliknięcie linku w następujący sposób:onClick={() => window.open('https://stackoverflow.com/', '_blank')}
Louie Bertoncin

186

Możesz dołączyć kotwicę do każdego <td>, tak:

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

Następnie można użyć display:block;zakotwiczeń, aby klikalny był cały wiersz.

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

Przykład jsFiddle tutaj.

Jest to prawdopodobnie tak optymalne, jak to tylko możliwe, chyba że skorzystasz z JavaScript.


11
To najlepsze rozwiązanie, brak jquery, brak javascript, tylko CSS, tzn. Mój link może być inny niż href, z wieloma parametrami, takimi jak <a4j: commandLink />, więc zachowuję go i zmieniam tylko styl. Wielkie dzięki.
TiyebM

4
@ Daniel dobra odpowiedź, ale jeśli komórka się rozszerza, nie działa poprawnie jak ten jsfiddle.net/RFFy9/253
środkowy

4
Świetny! To rozwiązanie umożliwia otwarcie łącza w nowej karcie, jeśli użytkownik tego chce. Ale puste kolumny nie będą miały linków.
Ignacio Pérez

9
@AnnaRouben Będę musiał się nie zgodzić: posiadanie wielu podobnych linków jest bardzo małym minusem w porównaniu do zalet (działa bez JS, czytnik ekranu może odczytać, do czego prowadzi link, może kliknąć z wciśniętym klawiszem Ctrl, aby otworzyć w nowej karcie. ..) Rozwiązania Pure-HTML działają prawie zawsze lepiej w oprogramowaniu wspomagającym niż rozwiązania JS.
JJJ

6
Podoba mi się to rozwiązanie, ponieważ jest dostępne. Użytkownicy mogą przechodzić między zakładkami za pomocą kart, a także można otwierać łącza w nowych kartach. To, co zrobiłem w mojej aplikacji, jest umieszczane tabindex="-1"we wszystkich oprócz pierwszego <td>linku, więc użytkownik tabuluje wiersz po rzędzie, a nie komórkę do komórki. Ponadto nadal możesz wyróżnić / obrysować cały wiersz, jeśli chcesz używać :focus-withinpseudoklasy CSS.
Jonathan

90

Połączony wiersz tabeli jest możliwy, ale nie ze standardowymi <table>elementami. Możesz to zrobić za pomocą display: tablewłaściwości stylu. Tu i tutaj jest kilka skrzypiec do zademonstrowania.

Ten kod powinien załatwić sprawę:

.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 role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

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

Należy pamiętać, że role ARIA są potrzebne, aby zapewnić odpowiednią dostępność, ponieważ standardowe <table>elementy nie są używane. Może być konieczne dodanie dodatkowych ról, np. role="columnheader"Jeśli dotyczy. Dowiedz się więcej w przewodniku tutaj.


13
Teraz spróbuj zastosować wtyczkę dataTables do tego! :)
Afonso Gomes

7
To jest poprawna odpowiedź IMHO, ponieważ zachowuje wszystkie narzędzia agenta użytkownika związane z linkami: wyszukiwanie (np. /Klucz w Firefox), nawigacja ( tabklucz), kopiowanie lokalizacji linku, otwieranie w nowej karcie / oknie itp. Nawet dla dostępnych / specjalnych potrzebuje przeglądarek. Moją jedyną nitpick jest to, że nie zagnieździłbym <div>wewnątrz <a>, więc komórki byłyby lepiej oznaczone jako <span>.
Tobia,

Zastosowanie wtyczek i bibliotek innych firm do takich tabel CSS może wymagać nieco więcej pracy, ale zwykle jest to kopiowanie-wklejanie i zastępowanie. Na przykład właśnie skopiowałem własny _tables.scssi kilka innych losowych elementów Bootstrap , zastępując wszystkie wystąpienia elementów tabeli klasami CSS, które wybrałem (które są po prostu takie same jak elementy: th.th) Niewiele pracy w porównaniu do korzyści, naprawdę .
Tobia,

2
Fajna odpowiedź, ale jest to tylko rozwiązanie, jeśli stół został użyty do właściwego wyrównania (co ma miejsce w wielu sytuacjach!). W przypadku danych tabelarycznych semantyczny <table>istnieje z jakiegoś powodu. Ale to wciąż bije wszelkie rozwiązania javascript :)
Marten Koetsier

Chociaż jest to bardzo sprytne obejście, po prostu tak jest. W rzeczywistości nie jest to tabela, a zatem, jak wspomina autor, spowoduje problemy z dostępnością. Najprawdopodobniej spowoduje to problemy z innymi rzeczami, które oczekują stołu, ale go dostają.
Tyson Gibby

25

Osiągnięty przy użyciu standardowego Bootstrap 4.3+ w następujący sposób - nie wymaga jQuery ani żadnych dodatkowych klas css!

Kluczem jest użycie stretched-linktekstu w komórce i zdefiniowanie go <tr>jako bloku zawierającego.

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

Blok zawierający można zdefiniować na różne sposoby, na przykład poprzez ustawienie transform wartość none none (jak w powyższym przykładzie).

Aby uzyskać więcej informacji przeczytaj tutaj jest dokumentacja Bootstrap dla stretched-link.


1
Ta odpowiedź zasługuje na więcej głosów. W ogóle brak javascript. A po co to scope="row"? Nie używam zakresu, a wiersz nadal zachowuje się jak łącze.
Christhofer Natalius,

@ChristhoferNatalius dzięki! Moja pierwotna odpowiedź nie zawierała scope="row"- sprawdź historię, jeśli chcesz zobaczyć, co jeszcze mogło być edytowane. Nie cofnąłem jednak edycji, ponieważ fragment kodu wydaje się działać (podobnie jak oryginał) i nie miałem okazji przetestować nowego kodu wyczerpująco :-)
Krishna Gupta

Minusem tego jest to, że link będzie na górze kolumn, nie można skopiować tekstu, a tytuł atrybutu w td nie jest wyświetlany, jeśli zostanie najechany myszą. Więc niestety muszę wrócić do starej drogi, umieścić link tylko w jednej kolumnie.
Christhofer Natalius

2
Podobało mi się to rozwiązanie, ale niestety nie jest to przeglądarka internetowa (Chrome / Firefox są OK, ale nie Safari). Problem wynika z trtego, że znacznik nie jest rozpoznawany jako reguły dla bloku zawierającego w przeglądarkach ... stackoverflow.com/questions/61342248/
pom421

17

O wiele bardziej elastycznym rozwiązaniem jest celowanie w cokolwiek za pomocą atrybutu data-href. Dzięki temu możesz łatwo ponownie użyć kodu w różnych miejscach.

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

Następnie w swoim jQuery po prostu celuj w dowolny element z tym atrybutem:

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

I nie zapomnij stylizować swojego css:

[data-href] {
    cursor: pointer;
}

Teraz możesz dodać atrybut data-href do dowolnego elementu, a on zadziała. Kiedy piszę takie fragmenty, podoba mi się ich elastyczność. Jeśli chcesz, możesz dodać do tego waniliowe rozwiązanie js.


dobra robota z css
Amirhossein Tarmast

Moje ulubione rozwiązanie. Dobra robota 👍🏽
MFrazier

7

Możesz użyć tego komponentu bootstrap:

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

Jasny Bootstrap

Brakujące elementy ulubionego frontu.

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

Stosowanie

Poprzez atrybuty danych

Dodaj klasę .rowlinki atrybut data-link="row"do elementu <table>lub <tbody>. W przypadku innych opcji dodaj nazwę do danych, ponieważ w data-target="a.mainlink"komórce A można wykluczyć, dodając .rowlink-skipklasę do<td> .

Przez JavaScript

Wywołaj maskę wprowadzania za pomocą javascript:

$('tbody.rowlink').rowlink()

6

Jest dobry sposób, aby technicznie zrobić to z <a>tagiem wewnątrz <tr>, który może być semantycznie niepoprawny (może dać ostrzeżenie w przeglądarce), ale będzie działał bez JavaScript/jQuerywymaganych:

<!-- 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: Zauważ, że sztuczka polega na tym, aby umieścić <a>znacznik jako ostatni element, w przeciwnym razie spróbuje on zająć miejsce w pierwszej <td>komórce.

PPS: Teraz cały wiersz będzie klikalny i możesz użyć tego linku, aby otworzyć również w nowej karcie (Ctrl / CMD + kliknięcie)


Czy to nie jest w zasadzie to samo, co moja odpowiedź ?
David Balažic

Chociaż te odpowiedzi wyglądają idealnie, to tak naprawdę nie działa, ponieważ <tr>elementy nie mogą mieć <a>elementu jako dziecko. Tylko <td>i <th>są ważnymi dziećmi. Zobacz: stackoverflow.com/questions/12634715/…
funkybunky

5

Możesz użyć metody onclick javascript w tr i ustawić ją jako klikalną, również jeśli musisz zbudować link ze względu na pewne szczegóły, możesz zadeklarować funkcję w javascript i wywołać ją w onclick, przekazując pewne wartości.


5

Oto sposób na umieszczenie przezroczystego elementu A na rzędach tabeli. Zalety to:

  • to prawdziwy element linku: po najechaniu kursorem zmienia wskaźnik, pokazuje link docelowy na pasku stanu, może być nawigowany za pomocą klawiatury, można go otworzyć w nowej karcie lub oknie, można skopiować adres URL itp.
  • tabela wygląda tak samo, jak bez dodanego łącza
  • bez zmian w samym kodzie tabeli

Niedogodności:

  • rozmiar elementu A musi być ustawiony w skrypcie, zarówno podczas tworzenia, jak i po wszelkich zmianach rozmiaru wiersza, który obejmuje (w przeciwnym razie można to zrobić bez JavaScript, co jest nadal możliwe, jeśli ustawiony jest również rozmiar tabeli w HTML lub CSS)

Stół pozostaje niezmieniony:

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

Dodaj łącza (dla każdego wiersza) za pomocą jQuery JavaScript, wstawiając element A do każdej pierwszej kolumny i ustawiając potrzebne właściwości:

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

Ustawienie szerokości i wysokości może być trudne, jeśli używanych jest wiele wypełnień i marginesów, ale generalnie kilka pikseli nie powinno nawet mieć znaczenia.

Demo na żywo tutaj: http://jsfiddle.net/qo0dx0oo/ (działa w Firefoksie, ale nie w IE ani Chrome, tam link jest źle ustawiony)

Naprawiono dla Chrome i IE (nadal działa również w FF): http://jsfiddle.net/qo0dx0oo/2/


2
Sprytne rozwiązanie. Odkryłem, że tworzenie elementu leniwie, dopiero po najechaniu na wiersz, przyniosło ogromny wzrost wydajności dla dużych tabel.
levi

1
@levi czy możesz podzielić się z nami swoją opinią na temat tego, jak lazyload?
Subliminal Hash

@KemalEmin Zakładam, że użyłby javascriptonmouseover
brad

5

Możesz dodać rolę przycisku do wiersza tabeli, a Bootstrap zmieni kursor bez żadnych zmian css. Postanowiłem użyć tej roli jako sposobu na łatwe kliknięcie dowolnego wiersza przy bardzo małym kodzie.

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

Możesz zastosować tę samą zasadę, aby dodać rolę przycisku do dowolnego znacznika.


wow, to faktycznie działało z ui-sref zamiast data-href bez kodu jquery. po prostu zmień kursor na palec.
nurp 17.07.19

działało to bezbłędnie dzięki tonie
Ashish Banerjee

4

Poniższy kod sprawi, że cały stół będzie klikalny. Kliknięcie łączy w tym przykładzie spowoduje wyświetlenie łącza w oknie dialogowym ostrzeżenia zamiast podążania za linkiem.

HTML:

Oto kod HTML za powyższym przykładem:

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

CSS

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

JQuery

I wreszcie jQuery, dzięki któremu magia się dzieje:

    $(document).ready(function() {

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

});

Po kliknięciu wiersza następuje wyszukiwanie href należącego do kotwicy. Jeśli zostanie znaleziony, lokalizacja okna zostanie ustawiona na ten href.


4

Bardzo łatwą opcją jest po prostu użycie kliknięcia i bardziej poprawne, z mojego punktu widzenia, ponieważ oddziela to widok od kontrolera i nie trzeba kodować adresu URL ani niczego więcej, co trzeba zrobić za pomocą kliknięcia . Działa również z Angular ng-click.

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

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

Przykład pracy tutaj


1
Z pewnością jest to poprawna odpowiedź. Inne są szalenie skomplikowane w przypadku tak prostej rzeczy. Jeśli chcesz zmienić wskaźnik myszy, możesz dodać tr: hover {kursor: wskaźnik; } do klasy CSS
Tom Close

1
@TomClose W zależności od tego, co chcesz zrobić, kliknij wiersz, może to być problematyczne, ponieważ np. Nawigacja nie będzie działać normalnie - bez klikania shift w celu otwarcia w nowej karcie / oknie, bez najechania kursorem, aby zobaczyć miejsce docelowe itp.
NetMage

3

Inna opcja wykorzystująca <a>pozycje CSS i niektóre jQuery lub 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;
}

Następnie musisz podać szerokość, używając na przykład jQuery:

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

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

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

3

Wiem, że ktoś już napisał prawie to samo, jednak moja droga jest poprawna (div nie może być dzieckiem A), a także lepiej jest używać klas.

Możesz naśladować tabelę za pomocą CSS i ustawić element A jako wiersz

<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

wolę użyć onclick=""atrybutu, ponieważ jest łatwy w użyciu i zrozumiały dla początkujących

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

3

Oto proste rozwiązanie ..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

2

Przyjęta odpowiedź jest świetna, ale proponuję małą alternatywę, jeśli nie chcesz powtarzać adresu URL przy każdym tr. Więc umieść adres URL lub href w adresie danych tabeli, a nie 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);
    });
});

Jest to również dobre, ponieważ nie musisz dodawać atrybutu danych kliknięcia do każdego tr. Inną dobrą rzeczą jest to, że nie używamy klasy do wywołania kliknięcia, ponieważ klasy powinny być naprawdę używane tylko do stylizacji.


2

Jednym z rozwiązań, o którym nie wspomniano wcześniej, jest użycie pojedynczego łącza w komórce i trochę CSS do rozszerzenia tego łącza na komórki:

table {
  border: 1px solid;
  width: 400px;
  overflow: hidden;
}

tr:hover {
  background: gray;
}

tr td {
  border: 1px solid;
}

tr td:first-child {
  position:relative;
}

a:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 400px;
}
<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>


To wygląda raczej elegancko. ALE demo linku google nie działa. Stackoverflow jeden robi. Prawdopodobnie tylko Google jest w stanie, w jakim są często. Może link do Binga :-) Dobrze je obsługuje. W każdym razie v ładne i schludne rozwiązanie.
BeNice,

To działa na mnie !! Niezłe rozwiązanie. Należy zauważyć, że szerokość: wcześniej musi być wystarczająco długa, aby pokryć stół.
Arst

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

Chociaż główne rozwiązanie tutaj jest świetne, moje rozwiązanie eliminuje potrzebę zajęć. Wszystko, co musisz zrobić, to dodać atrybut data-href z podanym adresem URL.


1

Zainwestowałem dużo czasu, próbując rozwiązać ten problem.

Istnieją 3 podejścia:

  1. Użyj JavaScript. Oczywiste wady: nie można natywnie otworzyć nowej karty, a po najechaniu kursorem nad wiersz nie będzie żadnych informacji na pasku stanu, jak w przypadku zwykłych linków. Dostępność to także pytanie.

  2. Używaj tylko HTML / CSS. Oznacza to umieszczenie <a>pod każdym zagnieżdżonym <td>. Proste podejście, takie jak to skrzypce , nie działa - Ponieważ klikalna powierzchnia niekoniecznie jest taka sama dla każdej kolumny. To poważny problem z UX. Ponadto, jeśli potrzebujesz <button>znaku w wierszu, nie jest prawidłowym kodem HTML zagnieżdżanie go pod <a>tagiem (chociaż przeglądarki są w tym zgodne ).

    Znalazłem 3 inne sposoby na wdrożenie tego podejścia. Po pierwsze jest ok, pozostałe dwa nie są świetne.

    a) Spójrz na ten przykład :

    tr {
      height: 0;
    }
    
    td {
      height: 0;
      padding: 0;
    }
    
    /* A hack to overcome differences between Chrome and Firefox */
    @-moz-document url-prefix() {
      td {
        height: 100%;
      }
    }
    
    a {
      display: block;
      height: 100%;
    }

    Działa, ale z powodu niespójności między Chrome i Firefox wymaga włamania specyficznego dla przeglądarki, aby pokonać różnice. Również Chrome zawsze wyrówna zawartość komórki do góry, co może powodować problemy z długimi tekstami, zwłaszcza jeśli w grę wchodzą różne wysokości linii.

    b) Ustawienie <td>na { display: contents; }. Prowadzi to do 2 innych problemów:

    b1. Jeśli ktoś inny spróbuje stylizować bezpośrednio <td>tag, na przykład ustawiając go { width: 20px; }, musimy jakoś przekazać ten styl do <a>tagu. Potrzebujemy do tego trochę magii, prawdopodobnie więcej magii niż w alternatywnej wersji Javascript.

    b2. { display: contents; }wciąż jest eksperymentalny; w szczególności nie jest obsługiwany w Edge.

    c) Ustawienie <td>na { height: --some-fixed-value; }. To po prostu nie jest wystarczająco elastyczne.

  3. Ostatnim podejściem, o którym poważnie myślę, jest w ogóle nie używanie wierszy , które można kliknąć . Wiersze, które można klikać, nie są świetnym doświadczeniem w UX: nie jest łatwo wizualnie oznaczyć je jako klikalne i stanowi wyzwanie, gdy klikalne jest wiele części w wierszach, takich jak przyciski. Tak więc realną alternatywą może być umieszczenie <a>znacznika tylko w pierwszej kolumnie, wyświetlanego jako zwykły link, i nadanie mu roli nawigowania po całym wierszu.


0

Oto inny sposób ...

HTML:

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

JQuery:

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

      });

});

Jak możemy go otworzyć w nowej karcie? @klewis
Khushbu Vaghela

0
<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Zamień # na adres URL, tabindex="0"dzięki czemu dowolny element może być aktywowany


-1

Możesz podać wierszowi identyfikator, np

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

a następnie użyj jquery, aby powiedzieć coś takiego:

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


1
Uważam, że chcesz użyć klasy zamiast identyfikatora, ponieważ najprawdopodobniej będziesz mieć wiele wierszy, a identyfikator powinien być używany tylko dla jednego elementu.
Programmingjoe

-11

Dlaczego nie powinniśmy używać tagów „div”…

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>

1
powinieneś poprawić swoją odpowiedź wyświetlając css: table
m1crdy

Popraw odpowiedź, dodając css
Prathamesh More
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.