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>

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.

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.

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.

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.

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.

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.

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

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)

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.

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/

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.

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.

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

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

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

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>

Oto proste rozwiązanie ..

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

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.

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>

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

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.

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

      });

});

<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

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

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

<div>

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

</div>