Saya tidak dapat menyetel baris tabel saya sebagai tautan ke sesuatu. Saya hanya dapat menggunakan css dan html. Saya mencoba hal yang berbeda dari div berturut-turut ke sesuatu yang lain, tetapi masih tidak dapat membuatnya berfungsi.

Anda memiliki dua cara untuk melakukan ini:

• Menggunakan javascript:

  <tr onclick="document.location = 'links.html';">

• Menggunakan jangkar:

  <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

Saya membuat pekerjaan kedua menggunakan:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

Untuk menghilangkan ruang mati antar kolom:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Berikut adalah demo sederhana dari contoh kedua: DEMO

Saya membuat sendiri fungsi jquery kustom:

Html

<tr data-href="site.com/whatever">

jQuery

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

Mudah dan sempurna untuk saya. Semoga membantu Anda.

(Saya tahu OP hanya menginginkan CSS dan HTML, tetapi pertimbangkan jQuery)

Edit

Setuju dengan Matt Kantor menggunakan data attr. Jawaban diedit di atas

Jika Anda menggunakan browser yang mendukungnya, Anda dapat menggunakan CSS untuk mengubahnya <a>menjadi baris tabel:

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Tentu saja, Anda dibatasi untuk tidak meletakkan elemen blok di dalam <a>. Anda juga tidak bisa mencampurnya dengan yang biasa<table>

Jika Anda harus menggunakan tabel, Anda dapat meletakkan tautan ke setiap sel tabel:

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

Dan buat tautan memenuhi seluruh sel:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

Jika Anda dapat menggunakan <div>s daripada tabel, HTML Anda bisa jauh lebih sederhana, dan Anda tidak akan mendapatkan "celah" pada tautan, di antara sel tabel:

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

Berikut adalah CSS yang sesuai dengan <div>metode ini:

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}

Cara biasa adalah dengan menetapkan beberapa JavaScript ke onClickatribut TRelemen.

Jika Anda tidak dapat menggunakan JavaScript, maka Anda harus menggunakan trik:

1. Tambahkan tautan yang sama ke setiap TDbaris yang sama (tautan harus merupakan elemen terluar di dalam sel).

2. Ubah tautan menjadi elemen blok: a { display: block; width: 100%; height: 100%; }

Yang terakhir akan memaksa tautan untuk mengisi seluruh sel sehingga mengeklik di mana saja akan memanggil tautan.

Anda tidak dapat membungkus <td>elemen dengan <a>tag, tetapi Anda dapat mencapai fungsi serupa dengan menggunakan onclickperistiwa untuk memanggil fungsi. Contohnya ditemukan di sini , seperti fungsi ini:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

Dan tambahkan ke tabel Anda seperti ini:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

Jawaban dari sirwilliam paling cocok untuk saya. Saya meningkatkan Javascript dengan dukungan untuk hotkey Ctrl + LeftClick (membuka halaman di tab baru). Acara ctrlKeydigunakan oleh PC, metaKeyoleh Mac.

Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

Contoh

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

Saya tahu pertanyaan ini sudah terjawab tetapi saya masih tidak menyukai solusi apa pun di halaman ini. Untuk orang-orang yang menggunakan JQuery, saya membuat solusi akhir yang memungkinkan Anda memberikan baris tabel perilaku yang hampir sama dengan <a>tag.

Ini solusi saya:

jQuery Anda dapat menambahkan ini misalnya ke file javascript standar yang disertakan

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 1){
            window.location.href = url;
        }
        else if(click == 2){
            window.open(url, '_blank');
            window.focus();
        }
        return true;
    }
});

HTML Sekarang Anda dapat menggunakan ini pada <tr>elemen apa pun di dalam HTML Anda

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>

Ketika saya ingin mensimulasikan <tr>dengan link tetapi menghormati standar html, saya melakukan ini.

HTML:

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS:

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

Dengan cara ini, ketika seseorang menggunakan mouse-nya di TR, semua baris (dan tautan ini) mendapatkan gaya hover dan dia tidak dapat melihat bahwa ada beberapa tautan.

Semoga bisa membantu seseorang.

Biola DI SINI

Hal ini menghemat waktu Anda untuk menduplikasi tautan di tr - cukup pancing tautan a.

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Sesuatu seperti ini mungkin? Meskipun menggunakan JS, tetapi itu hanya cara untuk membuat baris (tr) dapat diklik.

Kecuali jika Anda memiliki satu sel dengan tag jangkar yang memenuhi seluruh sel.

Dan kemudian, Anda tidak boleh menggunakan tabel.

Setelah membaca utas ini dan beberapa lainnya, saya menemukan solusi berikut di javascript:

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

Untuk menggunakannya menempatkan href di tr / td / th yang Anda inginkan untuk dapat diklik seperti: <tr href="http://stackoverflow.com">. Dan pastikan script di atas dijalankan setelah elemen tr dibuat (dengan penempatannya atau menggunakan event handler).

Kelemahannya adalah itu tidak akan sepenuhnya membuat TR berperilaku seperti tautan dengan div display: table;, dan mereka tidak akan dapat dipilih keyboard atau memiliki teks status. Sunting: Saya membuat navigasi keyboard berfungsi dengan mengatur onkeydown, role dan tabIndex, Anda dapat menghapus bagian itu jika hanya diperlukan mouse. Mereka tidak akan menampilkan URL di bilah status saat melayang.

Anda dapat mengatur gaya khusus tautan TR dengan pemilih CSS "tr [href]".

Saya punya cara lain. Apalagi jika Anda perlu memposting data menggunakan jQuery

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

Tetapkan variabel mengatur variabel dalam SESI di mana halaman yang akan Anda baca dan tindak lanjuti.

Saya sangat ingin cara memposting langsung ke lokasi jendela, tetapi saya rasa itu tidak mungkin.

Terima kasih untuk ini. Anda dapat mengubah ikon hover dengan menetapkan kelas CSS ke baris seperti:

<tr class="pointer" onclick="document.location = 'links.html';">

dan CSS terlihat seperti:

<style>
    .pointer { cursor: pointer; }
</style>

Bisakah Anda menambahkan tag A ke baris?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

Apakah ini yang Anda tanyakan?