bagaimana cara membuat seluruh baris dalam tabel yang dapat diklik sebagai tautan?


438

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>

2
JavaScript mungkin lebih baik untuk ini
John Conde

1
Dia menggunakan bootstrap jadi saya pikir dia harus bisa melakukannya :)
Ahmed Masud

Bagaimana dengan menempatkan elemen A transparan sebelum baris? Dengan begitu ia akan memiliki semua properti dari tautan asli (bilah status, klik tengah dll ...) dan juga tidak mengubah tampilan tabel (jika diinginkan).
David Balažic


Jawaban:


568

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.


105
Anda mungkin ingin juga mengubah kursor dengan css: tr.clickableRow {cursor: pointer; }
Winston Kotzan

78
Hanya ingin menambahkan bahwa Anda tidak boleh menggunakan hrefatribut pada a tr, karena itu bukan atribut yang valid untuk elemen ini. Gunakan atribut data sebagai gantinya: data-url="{linkurl}"dan dalam kode js:$(this).data('url')
Maksim Vi.

12
Anda dapat menghindari menggunakan kelas pada setiap baris, dan menghias tabel dengan nama kelas clickable_row(CamelCase bertentangan dengan standar HTML dan harus huruf kecil (saya punya masalah dengan lintas browser beberapa kali dengan ini)) dan kemudian jQuery adalah $('.clickable_row tr').click(function ...But Anda benar-benar harus menggunakan data-untuk menyimpan data, daripada hrefkarena itu adalah spesifikasi untuk data khusus. data-urldan jquery akan mengaksesnya seperti$(this).data(url);
Piotr Kula

3
FYI: Jika Anda bisa, Anda harus meninggalkan tautan di suatu tempat di tr untuk orang-orang yang menonaktifkan Javascript.
hitautodestruct

47
Bukan penggemar berat solusi ini karena pengguna tidak melihat URL tautan di bagian bawah peramban saat melayang, dan yang lebih penting tidak dapat mengklik roda tautan untuk membukanya di tab baru. Memasukkan atag dengan display: block;di dalam setiap sel agak menjengkelkan tetapi sepertinya cara yang paling bermanfaat untuk menyelesaikan masalah ini.
Maxime Rossini

222

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.


3
@Quillo OP secara khusus menyatakan bahwa dia menggunakan bootstrap. jadi solusi jQuery akan lebih baik dalam kerangka kerja
Ahmed Masud

39
@AhmedMasud Dalam hal ini, ya. Meskipun bagi pembaca masa depan, JS mungkin merupakan solusi yang lebih baik. Karena itulah tujuan dari Stackoverflow, saya masih menganggap komentar saya valid.
Menno

3
Pemisahan perilaku dan markup tentu saja lebih disukai. Jika ada, saya akan mengatakan bahwa href bukan atribut yang valid pada tr. Ini harus diganti dengan data-href, dan ganti $ (this) .attr dengan $ (this) .data.
davidfurber

1
Atau Anda bisa membuat pendekatan penjilidan acara ".clickableRow" mencari yang pertama <a>di dalam baris yang diklik. (Itu juga akan menurunkan anggun)
Jason Sperske

3
Jika Anda menggunakan sintaks ES6, Anda dapat menjalankan klik tautan seperti ini:onClick={() => window.open('https://stackoverflow.com/', '_blank')}
Louie Bertoncin

186

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.


11
Ini adalah solusi terbaik, tanpa jquery, tanpa javascript, hanya CSS, yaitu tautan saya bisa berbeda bukan href, dengan beberapa parameter seperti <a4j: commandLink /> jadi saya menyimpannya dan mengubah hanya gaya. Terimakasih banyak.
TiyebM

4
@aniel jawaban yang bagus tetapi jika sel memanjang ke bawah, tidak berfungsi dengan baik seperti ini jsfiddle.net/RFFy9/253
midstack

4
Bagus! Solusi ini memungkinkan buka tautan di tab baru jika diinginkan. Tetapi kolom kosong tidak akan memiliki tautan.
Ignacio Pérez

9
@AnnaRouben Saya harus tidak setuju: memiliki beberapa tautan serupa adalah kelemahan yang sangat kecil dibandingkan dengan sisi baiknya (berfungsi tanpa JS, pembaca layar dapat membaca ke mana tautan mengarah, dapat ctrl-klik untuk membuka di tab baru. ..) Solusi Pure-HTML bekerja hampir selalu lebih baik dalam perangkat lunak bantu daripada solusi JS.
JJJ

6
Saya suka solusi ini karena betapa mudahnya diakses. Pengguna dapat membuka tab melalui tautan, plus Anda dapat membuka tautan di tab baru. Apa yang saya lakukan di aplikasi saya diletakkan tabindex="-1"di semua kecuali <td>tautan pertama , sehingga tab pengguna baris ke baris, bukan sel ke sel. Plus, Anda masih dapat menyorot / menguraikan seluruh baris jika Anda ingin menggunakan :focus-withinpseudo-class CSS.
Jonathan

90

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.


13
Sekarang coba terapkan plugin dataTables untuk yang satu ini! :)
Afonso Gomes

7
Ini adalah jawaban IMHO yang benar, karena ia mempertahankan semua alat agen pengguna yang terkait dengan tautan: pencarian (mis. /Kunci di Firefox), navigasi ( tabkunci), Salin lokasi tautan, Buka di tab / jendela baru, dll. Bahkan untuk dapat diakses / khusus membutuhkan browser. Nitpick saya satu-satunya adalah bahwa saya tidak akan membuat sarang <div>di dalam <a>, jadi sel-sel akan lebih baik ditandai sebagai <span>.
Tobia

Menerapkan plugin dan pustaka pihak ketiga ke tabel CSS semacam itu mungkin melibatkan sedikit lebih banyak pekerjaan, tetapi biasanya menyalin dan menempel. Sebagai contoh, saya hanya menduplikasi Bootstrap sendiri _tables.scssdan beberapa potongan acak lainnya, menggantikan semua kemunculan elemen tabel dengan kelas CSS yang saya pilih untuk digunakan (yang hanya sama dengan elemen: th.th) Tidak banyak pekerjaan dibandingkan dengan manfaatnya, sungguh .
Tobia

2
Jawaban yang bagus, tetapi ini hanya solusi jika tabel hanya digunakan untuk penyelarasan yang tepat (yang terjadi dalam banyak situasi!). Untuk data tabular, semantik <table>ada karena suatu alasan. Tapi ini masih mengalahkan semua solusi javascript :)
Marten Koetsier

Meskipun ini adalah penyelesaian yang sangat cerdas, hanya saja itu. Ini sebenarnya bukan meja dan, seperti yang penulis sebutkan, akan menghadirkan masalah aksesibilitas. Kemungkinan besar akan menyebabkan masalah dengan hal-hal lain yang mengharapkan meja tetapi mendapatkan satu.
Tyson Gibby

26

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.


1
Jawaban ini layak mendapat lebih banyak suara. Tidak ada javascript sama sekali. Dan untuk apa itu scope="row"? Saya tidak menggunakan ruang lingkup dan baris masih berlaku sebagai tautan.
Christhofer Natalius

@ChristhoferNatalius terima kasih! Jawaban asli saya tidak mengandung scope="row"- silakan periksa riwayatnya jika Anda ingin melihat apa lagi yang telah diedit. Saya tidak mengembalikan suntingan, karena potongan kode tampaknya berfungsi (seperti yang asli) dan saya tidak mendapatkan kesempatan untuk menguji kode baru secara menyeluruh :-)
Krishna Gupta

Kelemahan dari ini adalah karena tautan akan berada di atas kolom, Anda tidak dapat menyalin teks, dan judul atribut di td tidak ditampilkan jika digerakkan oleh mouse. Jadi sayangnya, saya harus kembali ke cara lama, taruh link hanya ke satu kolom.
Christhofer Natalius

3
Saya menyukai solusi ini, tetapi sayangnya, ini bukan cross-browser (Chrome / Firefox OK tapi bukan Safari). Masalahnya adalah karena trtag yang tidak dikenali sebagai aturan untuk blok yang berisi di antara browser ... stackoverflow.com/questions/61342248/…
pom421

Ya, ini tampaknya mematahkan tautan tabel di Safari - perilaku melayang-layang menjadi sangat kacau. Komentar pada # 28608 ini tampaknya mengindikasikan bahwa tidak mungkin untuk mendapatkan perilaku yang diinginkan pada tabel dengan stretched-link.
Jo Liss

17

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.


kerja bagus dengan css
Amirhossein Tarmast

Solusi favorit saya Dilakukan dengan baik 👍🏽
MFrazier

7

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

6

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)


Bukankah ini pada dasarnya sama dengan jawaban saya ?
David Balažic

Walaupun jawaban ini terlihat sempurna, itu sebenarnya tidak berfungsi, karena <tr>unsur-unsur tidak dapat memiliki <a>unsur sebagai seorang anak. Hanya <td>dan <th>anak-anak berlaku. Lihat: stackoverflow.com/questions/12634715/…
funkybunky

5

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.


5

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/


2
Solusi cerdas. Saya menemukan membuat elemen malas, hanya sekali baris melayang, membawa peningkatan kinerja besar untuk tabel besar.
levi

1
@ Levi, bisakah Anda memberikan umpan balik tentang bagaimana cara malas ini?
Subliminal Hash

@ KemalEmin Saya akan berasumsi bahwa dia akan menggunakan javascriptonmouseover
brad

5

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.


wow itu benar-benar bekerja dengan ui-sref bukan data-href tanpa kode jquery. hanya perlu mengubah kursor ke jari.
nurp

ini bekerja dengan sempurna, terima kasih banyak
Ashish Banerjee

5

Inilah solusi sederhana ..

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

4

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.


4

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


1
Tentunya ini jawaban yang benar. Yang lain sangat rumit untuk hal yang begitu sederhana. Jika Anda ingin mengubah pointer mouse Anda dapat menambahkan tr: hover {cursor: pointer; } ke kelas CSS Anda
Tom Tutup

1
@TomClose Tergantung pada apa yang Anda ingin klik baris lakukan, ini bisa menjadi masalah karena misalnya navigasi tidak akan bekerja secara normal - tidak ada klik shift untuk membuka di tab / jendela baru, tidak ada kursor untuk melihat tujuan, dll.
NetMage

3

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

3

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

3

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>

2

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.


2

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>


Ini terlihat agak elegan. TETAPI demo tautan google tidak berfungsi. Stackoverflow tidak. Mungkin hanya Google yang menilai seperti biasanya. Mungkin tautan ke Bing :-) Melayani dengan benar. Bagaimanapun juga, solusi yang bagus dan rapi.
BeNice

Ini berhasil !! Solusi yang bagus. Satu hal yang perlu diperhatikan adalah bahwa lebar untuk: sebelum harus cukup panjang untuk menutupi tabel.
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>

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.


1

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.


0

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

      });

});

Bagaimana kita bisa membukanya di tab baru? @klewis
Khushbu Vaghela

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


-1

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


1
Saya percaya Anda ingin menggunakan kelas daripada id karena Anda kemungkinan besar akan memiliki beberapa baris dan id hanya boleh digunakan untuk satu item.
Programmingjoe

-11

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

<div>

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

</div>

1
Anda harus meningkatkan jawaban Anda dengan tampilan css: table
m1crdy

Tingkatkan jawaban dengan menambahkan css
Prathamesh Lebih Banyak
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.