Saya menggunakan Bootstrap dan yang berikut ini tidak berfungsi:

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

Catatan penulis I:

Silakan lihat jawaban lain di bawah ini, terutama yang tidak menggunakan jquery.

Catatan penulis II:

Diawetkan untuk anak cucu tetapi pasti pendekatan yang salah pada tahun 2020. (Apakah non idiomatik bahkan kembali pada 2017)

Jawaban Asli

Anda menggunakan Bootstrap yang berarti Anda menggunakan jQuery: ^), jadi salah satu cara untuk melakukannya adalah:

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

Tentu saja Anda tidak harus menggunakan href atau berpindah lokasi, Anda dapat melakukan apa pun yang Anda suka di fungsi pengendali klik. Baca terus jQuerydan cara menulis penangan;

Keuntungan menggunakan class over id adalah Anda dapat menerapkan solusi ke beberapa baris:

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

dan basis kode Anda tidak berubah. Pawang yang sama akan mengurus semua baris.

Pilihan lain

Anda dapat menggunakan Bootstrap jQuery callback seperti ini (dalam document.readypanggilan balik):

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

Ini memiliki keuntungan karena tidak diatur ulang pada penyortiran tabel (yang terjadi dengan opsi lain).

Catatan

Karena ini telah diposting window.document.locationsudah usang (atau paling tidak usang) digunakan window.locationsebagai gantinya.

Kamu tidak bisa melakukan itu Ini adalah HTML yang tidak valid. Anda tidak dapat menempatkan <a>di antara a <tbody>dan a <tr>. Coba ini sebagai gantinya:

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

tambahkan gaya untuk tampilan penunjuk

[data-href] { cursor: pointer; }

Saat mengerjakannya, Anda ingin menggunakan JavaScript untuk menetapkan penangan klik di luar HTML.

Anda dapat menyertakan jangkar di dalam setiap <td>, seperti:

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

Anda kemudian dapat menggunakan display:block;jangkar untuk membuat baris penuh dapat diklik.

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

Contoh jsFiddle di sini.

Ini mungkin seoptimal yang Anda dapatkan kecuali Anda menggunakan JavaScript.

Baris tabel tertaut dimungkinkan, tetapi tidak dengan <table>elemen standar . Anda dapat melakukannya menggunakan display: tableproperti style. Di sini dan di sini ada beberapa biola untuk ditunjukkan.

Kode ini harus melakukan trik:

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

Perhatikan bahwa peran ARIA diperlukan untuk memastikan aksesibilitas yang tepat karena <table>elemen standar tidak digunakan. Anda mungkin perlu menambahkan peran tambahan seperti role="columnheader"jika berlaku. Cari tahu lebih lanjut di panduan di sini.

Dicapai dengan menggunakan Bootstrap 4.3+ standar sebagai berikut - tidak perlu jQuery atau kelas css tambahan!

Kuncinya adalah untuk digunakan stretched-linkpada teks di dalam sel dan mendefinisikan <tr>sebagai blok yang berisi.

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

Anda dapat mendefinisikan mengandung blok dengan berbagai cara misalnya pengaturan transformke nilai tidak ada (seperti contoh di atas).

Untuk informasi lebih lanjut baca di sini dokumentasi Bootstrap untuk stretched-link.

Solusi yang jauh lebih fleksibel adalah menargetkan apa pun dengan atribut data-href. Ini adalah Anda dapat menggunakan kembali kode dengan mudah di tempat yang berbeda.

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

Kemudian di jQuery Anda, targetkan saja elemen apa saja dengan atribut itu:

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

Dan jangan lupa memberi style pada css Anda:

[data-href] {
    cursor: pointer;
}

Sekarang Anda dapat menambahkan atribut data-href ke elemen apa pun dan itu akan berfungsi. Ketika saya menulis cuplikan seperti ini, saya ingin mereka fleksibel. Jangan ragu untuk menambahkan solusi vanilla js ke ini jika Anda memilikinya.

Anda dapat menggunakan komponen bootstrap ini:

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

Jasny Bootstrap

Komponen yang hilang untuk kerangka front-end favorit Anda.

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

Pemakaian

Melalui atribut data

Tambahkan kelas .rowlinkdan atribut data-link="row"ke elemen <table>atau <tbody>. Untuk opsi lain tambahkan nama ke data-, seperti dalam data-target="a.mainlink"sel dapat dikecualikan dengan menambahkan .rowlink-skipkelas ke <td>.

Melalui JavaScript

Panggil topeng input melalui javascript:

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

Ada cara yang baik untuk melakukannya secara teknis dengan <a>tag di dalam <tr>, yang mungkin secara semantik salah (mungkin memberi Anda peringatan browser), tetapi akan berfungsi tanpa JavaScript/jQuerydiperlukan:

<!-- 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: Perhatikan triknya di sini adalah menempatkan <a>tag sebagai elemen terakhir, jika tidak maka akan mencoba mengambil ruang <td>sel pertama .

PPS: Sekarang seluruh baris Anda akan dapat diklik dan Anda dapat menggunakan tautan ini untuk membuka tab baru juga (Ctrl / CMD + klik)

Anda dapat menggunakan metode javascript onclick di tr dan membuatnya dapat diklik, juga jika Anda perlu membuat tautan karena beberapa detail, Anda dapat mendeklarasikan fungsi dalam javascript dan memanggilnya di onclick, meneruskan beberapa nilai.

Berikut ini caranya dengan meletakkan elemen A transparan di atas baris tabel. Keuntungannya adalah:

• adalah elemen tautan nyata: pada kursor perubahan kursor, menampilkan tautan target di bilah status, dapat dinavigasi keyboard, dapat dibuka di tab atau jendela baru, URL dapat disalin, dll
• tabel terlihat sama seperti tanpa tautan yang ditambahkan
• tidak ada perubahan dalam kode tabel itu sendiri

Kekurangan:

• ukuran elemen A harus diatur dalam skrip, baik pada pembuatan maupun setelah perubahan ukuran baris yang dicakupnya (jika tidak, dapat dilakukan tanpa JavaScript sama sekali, yang masih dimungkinkan jika ukuran tabel juga diatur dalam HTML atau CSS)

Tabel tetap seperti ini:

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

Tambahkan tautan (untuk setiap baris) melalui JavaScript jQuery dengan memasukkan elemen A ke dalam setiap kolom pertama dan mengatur properti yang diperlukan:

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

Pengaturan lebar dan tinggi bisa rumit, jika banyak bantalan dan margin digunakan, tetapi secara umum beberapa piksel mati seharusnya tidak masalah.

Demo langsung di sini: http://jsfiddle.net/qo0dx0oo/ (berfungsi di Firefox, tetapi tidak untuk IE atau Chrome, tautannya salah)

Tetap untuk Chrome dan IE (masih berfungsi di FF juga): http://jsfiddle.net/qo0dx0oo/2/

Anda dapat menambahkan peran tombol ke baris tabel dan Bootstrap akan mengubah kursor tanpa perubahan css. Saya memutuskan untuk menggunakan peran itu sebagai cara untuk dengan mudah membuat baris yang dapat diklik dengan kode yang sangat sedikit.

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

Anda dapat menerapkan prinsip yang sama ini untuk menambahkan peran tombol ke tag apa pun.

Inilah solusi sederhana ..

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

Kode di bawah ini akan membuat seluruh tabel Anda dapat diklik. Mengklik tautan dalam contoh ini akan menampilkan tautan dalam dialog peringatan alih-alih mengikuti tautan.

HTML:

Inilah HTML di belakang contoh di atas:

    <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

Dan 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

Dan akhirnya jQuery yang membuat keajaiban terjadi:

    $(document).ready(function() {

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

});

Apa yang dilakukan adalah ketika baris diklik, pencarian dilakukan untuk href milik jangkar. Jika ditemukan, lokasi jendela diatur ke href itu.

Pilihan yang sangat mudah hanya menggunakan klik, dan lebih benar, menurut saya, karena ini memisahkan tampilan dan pengontrol, dan Anda tidak perlu membuat kode URL yang keras atau apa pun yang perlu Anda lakukan dengan mengklik. . Ini bekerja dengan Angular ng-klik juga.

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

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

Contohnya bekerja di sini

Pilihan lain menggunakan <a>, posisi CSS dan beberapa jQuery atau 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;
}

Maka Anda harus memberikan lebar, menggunakan misalnya jQuery:

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

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

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

Saya tahu seseorang telah menulis hampir sama, namun cara saya adalah cara yang benar (div tidak bisa menjadi anak A) dan juga lebih baik menggunakan kelas.

Anda bisa meniru tabel menggunakan CSS dan membuat elemen A baris

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

saya lebih suka menggunakan onclick=""atribut karena mudah digunakan dan dimengerti untuk pemula seperti

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

Jawaban yang diterima bagus, tetapi saya mengusulkan alternatif kecil jika Anda tidak ingin mengulangi url pada setiap tr. Jadi Anda meletakkan url atau href di tabel data-url dan bukan 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);
    });
});

Ini juga bagus karena Anda tidak perlu menambahkan atribut data klik ke setiap tr. Hal baik lainnya adalah kita tidak menggunakan kelas untuk memicu klik karena kelas hanya benar-benar digunakan untuk styling.

Salah satu solusi yang tidak disebutkan sebelumnya adalah menggunakan tautan tunggal dalam sel dan beberapa CSS untuk memperluas tautan ini di atas sel:

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>

Sementara solusi utama di sini sangat bagus, solusi saya menghilangkan kebutuhan akan kelas. Yang perlu Anda lakukan adalah menambahkan atribut data-href dengan URL di dalamnya.

Saya telah menginvestasikan banyak waktu untuk memecahkan masalah ini.

Ada 3 pendekatan:

1. Gunakan JavaScript. Kelemahan yang jelas: tidak mungkin untuk membuka tab baru secara asli, dan ketika melayang di atas baris tidak akan ada indikasi pada bilah status seperti yang dimiliki tautan biasa. Aksesibilitas juga merupakan pertanyaan.

2. Gunakan HTML / CSS saja. Ini berarti menempatkan <a>sarang di bawah masing-masing <td>. Pendekatan sederhana seperti biola ini tidak berfungsi - Karena permukaan yang dapat diklik tidak harus sama untuk setiap kolom. Ini adalah masalah UX yang serius. Juga, jika Anda membutuhkannya <button>di baris, itu bukan HTML yang valid untuk membuat sarangnya<a> tag (meskipun browser tidak masalah dengan itu).

   Saya telah menemukan 3 cara lain untuk menerapkan pendekatan ini. Pertama tidak apa-apa, dua lainnya tidak bagus.

   a) Lihatlah contoh ini :

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

   Ini berfungsi, tetapi karena adanya ketidakkonsistenan antara Chrome dan Firefox, ini memerlukan peramban khusus peramban untuk mengatasi perbedaan. Chrome juga akan selalu menyelaraskan konten sel ke atas, yang dapat menyebabkan masalah dengan teks yang panjang, terutama jika berbagai ketinggian garis terlibat.

   b) Pengaturan <td>untuk { display: contents; }. Ini mengarah ke 2 masalah lain:

   b1. Jika orang lain mencoba menata <td>tag secara langsung , seperti mengaturnya { width: 20px; }, kita perlu meneruskan gaya itu ke <a>tag tersebut. Kami membutuhkan beberapa sihir untuk melakukan itu, mungkin lebih banyak sihir daripada di alternatif Javascript.

   b2. { display: contents; }masih eksperimental; khusus itu tidak didukung di Edge.

   c) Pengaturan <td>untuk { height: --some-fixed-value; }. Ini tidak cukup fleksibel.

3. Pendekatan terakhir, yang saya rekomendasikan untuk dipikirkan secara serius, adalah tidak menggunakan baris yang dapat diklik sama sekali . Baris yang dapat diklik bukanlah pengalaman UX yang hebat: tidak mudah untuk secara visual menandai mereka sebagai dapat diklik, dan itu menimbulkan tantangan ketika beberapa bagian dapat diklik dalam baris, seperti tombol. Jadi alternatif yang bisa dilakukan adalah dengan memiliki <a>tag hanya pada kolom pertama, ditampilkan sebagai tautan biasa, dan berikan peran untuk menavigasi seluruh baris.

Ini cara lain ...

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>

Ganti # dengan url, tabindex="0"buat elemen apa pun menjadi fokus

Anda bisa memberi baris id, misalnya

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

dan kemudian gunakan jquery untuk mengatakan sesuatu seperti:

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

Mengapa kita tidak menggunakan tag "div" ....

<div>

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

</div>