Tôi đang sử dụng Bootstrap và những thứ sau không hoạt động:

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

Tác giả lưu ý tôi:

Vui lòng xem các câu trả lời khác bên dưới, đặc biệt là những câu không sử dụng jquery.

Ghi chú của tác giả II:

Được bảo tồn cho hậu thế nhưng chắc chắn là cách tiếp cận sai trong năm 2020. (Không phải là thành ngữ ngay cả vào năm 2017)

Câu trả lời gốc

Bạn đang sử dụng Bootstrap có nghĩa là bạn đang sử dụng jQuery: ^), vì vậy một cách để làm điều đó là:

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

Tất nhiên, bạn không phải sử dụng href hoặc chuyển đổi vị trí, bạn có thể làm bất cứ điều gì bạn thích trong chức năng xử lý nhấp chuột. Đọc lên jQueryvà làm thế nào để viết xử lý;

Ưu điểm của việc sử dụng một lớp trên id là bạn có thể áp dụng giải pháp cho nhiều hàng:

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

và cơ sở mã của bạn không thay đổi. Người xử lý tương tự sẽ chăm sóc tất cả các hàng.

Một lựa chọn khác

Bạn có thể sử dụng các cuộc gọi lại Bootstrap jQuery như thế này (trong một document.readycuộc gọi lại):

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

Điều này có lợi thế là không được thiết lập lại khi sắp xếp bảng (xảy ra với tùy chọn khác).

Ghi chú

Vì điều này đã được đăng window.document.locationlà lỗi thời (hoặc ít nhất là không dùng nữa) sử dụng window.locationthay thế.

Bạn không thể làm điều đó. Đó là HTML không hợp lệ. Bạn không thể đặt một <a>ở giữa a <tbody>và a <tr>. Hãy thử điều này thay thế:

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

thêm kiểu cho chế độ xem con trỏ

[data-href] { cursor: pointer; }

Khi bạn làm việc với nó, bạn sẽ muốn sử dụng JavaScript để gán trình xử lý nhấp bên ngoài HTML.

Bạn có thể bao gồm một neo bên trong mỗi <td>, như vậy:

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

Sau đó, bạn có thể sử dụng display:block;trên các neo để làm cho toàn bộ hàng có thể nhấp được.

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

Ví dụ jsFiddle ở đây.

Điều này có thể là tối ưu như bạn sẽ có được nó trừ khi bạn sử dụng JavaScript.

Một hàng bảng được liên kết là có thể, nhưng không phải với các <table>yếu tố tiêu chuẩn . Bạn có thể làm điều đó bằng cách sử dụng các display: tablethuộc tính phong cách. Đây và đây là một số câu đố để chứng minh.

Mã này nên thực hiện thủ thuật:

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

Lưu ý rằng vai trò ARIA là cần thiết để đảm bảo khả năng tiếp cận phù hợp vì các <table>yếu tố tiêu chuẩn không được sử dụng. Bạn có thể cần thêm các vai trò bổ sung như role="columnheader"nếu có. Tìm hiểu thêm tại hướng dẫn ở đây.

Đạt được bằng cách sử dụng Bootstrap 4.3+ tiêu chuẩn như sau - không cần jQuery cũng như bất kỳ lớp css bổ sung nào!

Chìa khóa là sử dụng stretched-linktrên văn bản trong ô và xác định <tr>là một khối chứa.

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

Bạn có thể xác định khối chứa theo các cách khác nhau để thiết lập ví dụ thành transformkhông có giá trị (như trong ví dụ ở trên).

Để biết thêm thông tin đọc ở đây là tài liệu hướng dẫn Bootstrap cho stretched-link.

Một giải pháp linh hoạt hơn nhiều là nhắm mục tiêu bất cứ thứ gì có thuộc tính data-href. Điều này là bạn có thể sử dụng lại mã dễ dàng ở những nơi khác nhau.

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

Sau đó, trong jQuery của bạn chỉ nhắm mục tiêu bất kỳ phần tử nào với thuộc tính đó:

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

Và đừng quên tạo kiểu cho css của bạn:

[data-href] {
    cursor: pointer;
}

Bây giờ bạn có thể thêm thuộc tính data-href vào bất kỳ phần tử nào và nó sẽ hoạt động. Khi tôi viết đoạn trích như thế này, tôi thích chúng linh hoạt. Hãy thêm giải pháp vanilla js vào đây nếu bạn có.

Bạn có thể sử dụng thành phần bootstrap này:

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

Bootstrap Jasny

Các thành phần còn thiếu cho khung giao diện người dùng yêu thích của bạn.

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

Sử dụng

Thông qua các thuộc tính dữ liệu

Thêm lớp .rowlinkvà thuộc tính data-link="row"cho một <table>hoặc <tbody>phần tử. Đối với các tùy chọn khác, nối tên vào dữ liệu-, như trong data-target="a.mainlink"một ô có thể được loại trừ bằng cách thêm .rowlink-skiplớp vào <td>.

Thông qua JavaScript

Gọi mặt nạ đầu vào thông qua javascript:

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

Có một cách hay để thực hiện kỹ thuật với <a>thẻ bên trong <tr>, có thể không chính xác về mặt ngữ nghĩa (có thể đưa ra cảnh báo cho trình duyệt), nhưng sẽ hoạt động mà không JavaScript/jQuerycần:

<!-- 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: Lưu ý mẹo ở đây là đặt <a>thẻ làm phần tử cuối cùng, nếu không nó sẽ cố lấy khoảng trống của <td>ô đầu tiên .

PPS: Bây giờ toàn bộ hàng của bạn sẽ có thể nhấp và bạn cũng có thể sử dụng liên kết này để mở trong tab mới (Ctrl / CMD + nhấp)

Bạn có thể sử dụng phương pháp javascript onclick trong tr và làm cho nó có thể nhấp được, ngoài ra nếu bạn cần xây dựng liên kết của mình do một số chi tiết bạn có thể khai báo một hàm trong javascript và gọi nó bằng onclick, chuyển một số giá trị.

Đây là một cách bằng cách đặt một phần tử A trong suốt trên các hàng của bảng. Ưu điểm là:

• là một yếu tố liên kết thực: trên con trỏ thay đổi con trỏ, hiển thị liên kết đích trong thanh trạng thái, có thể được điều hướng bằng bàn phím, có thể được mở trong tab hoặc cửa sổ mới, URL có thể được sao chép, v.v.
• bảng trông giống như không có liên kết được thêm vào
• không có thay đổi trong chính mã bảng

Nhược điểm:

• kích thước của phần tử A phải được đặt trong một tập lệnh, cả khi tạo và sau khi có bất kỳ thay đổi nào đối với kích thước của hàng mà nó bao gồm (nếu không thì có thể thực hiện được với JavaScript, điều này vẫn có thể xảy ra nếu kích thước bảng cũng được đặt bằng HTML hoặc CSS)

Bảng vẫn như cũ:

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

Thêm các liên kết (cho mỗi hàng) thông qua jQuery JavaScript bằng cách chèn một phần tử A vào mỗi cột đầu tiên và đặt các thuộc tính cần thiết:

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

Cài đặt chiều rộng và chiều cao có thể khó khăn, nếu sử dụng nhiều phần đệm và lề, nhưng nói chung, một vài pixel không nên quan trọng.

Bản demo trực tiếp tại đây: http://jsfiddle.net/qo0dx0oo/ (hoạt động trong Firefox, nhưng không phải IE hoặc Chrome, có liên kết bị sai vị trí)

Đã sửa lỗi cho Chrome và IE (vẫn hoạt động trong FF): http://jsfiddle.net/qo0dx0oo/2/

Bạn có thể thêm vai trò nút vào một hàng của bảng và Bootstrap sẽ thay đổi con trỏ mà không có bất kỳ thay đổi css nào. Tôi quyết định sử dụng vai trò đó như một cách để dễ dàng thực hiện bất kỳ hàng nào có thể nhấp được với rất ít mã.

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

Bạn có thể áp dụng nguyên tắc tương tự này để thêm vai trò nút cho bất kỳ thẻ nào.

Mã dưới đây sẽ làm cho toàn bộ bảng của bạn có thể nhấp. Nhấp vào các liên kết trong ví dụ này sẽ hiển thị liên kết trong hộp thoại cảnh báo thay vì theo liên kết.

HTML:

Đây là HTML đằng sau ví dụ trên:

    <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

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

Và cuối cùng là jQuery tạo nên điều kỳ diệu:

    $(document).ready(function() {

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

});

Những gì nó làm là khi một hàng được nhấp vào, một tìm kiếm được thực hiện cho href thuộc về một neo. Nếu một cái được tìm thấy, vị trí của cửa sổ được đặt thành đó href.

Theo quan điểm của tôi, một tùy chọn rất dễ dàng chỉ là sử dụng nhấp chuột, và chính xác hơn, bởi vì điều này tách biệt chế độ xem và bộ điều khiển và bạn không cần phải mã hóa URL hoặc bất cứ điều gì bạn cần thực hiện với nhấp chuột . Nó hoạt động với Angular ng-click quá.

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

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

Mẫu mực làm việc ở đây

Một tùy chọn khác sử dụng một <a>vị trí CSS và một số jQuery hoặc 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;
}

Sau đó, bạn cần đưa ra chiều rộng, sử dụng ví dụ jQuery:

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

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

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

Tôi biết ai đó đã viết khá giống nhau, tuy nhiên cách của tôi là cách chính xác (div không thể là con của A) và cũng tốt hơn khi sử dụng các lớp.

Bạn có thể bắt chước một bảng bằng CSS và tạo thành phần A thành hàng

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

Tôi thích sử dụng onclick=""thuộc tính vì nó dễ sử dụng và dễ hiểu cho người mới như

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

Đây là giải pháp đơn giản ..

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

Câu trả lời được chấp nhận là rất tốt, nhưng tôi đề xuất một giải pháp thay thế nhỏ nếu bạn không muốn lặp lại url trên mỗi tr. Vì vậy, bạn đặt url or href trong bảng dữ liệu-url chứ không phải 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);
    });
});

Điều này cũng tốt vì bạn không cần thêm thuộc tính dữ liệu nhấp vào mỗi tr. Một điều tốt khác là chúng ta không sử dụng một lớp để kích hoạt một nhấp chuột vì các lớp chỉ thực sự được sử dụng để tạo kiểu.

Một giải pháp không được đề cập trước đó là sử dụng một liên kết trong một ô và một số CSS để mở rộng liên kết này qua các ô:

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>

Trong khi giải pháp chính ở đây là tuyệt vời, giải pháp của tôi loại bỏ sự cần thiết cho các lớp học. Tất cả những gì bạn cần làm là thêm thuộc tính data-href với URL trong đó.

Tôi đã đầu tư rất nhiều thời gian để cố gắng giải quyết vấn đề này.

Có 3 cách tiếp cận:

1. Sử dụng JavaScript. Hạn chế rõ ràng: không thể mở một tab mới nguyên bản và khi di chuột qua hàng sẽ không có dấu hiệu nào trên thanh trạng thái như các liên kết thông thường có. Khả năng tiếp cận cũng là một câu hỏi.

2. Chỉ sử dụng HTML / CSS. Điều này có nghĩa là đặt <a>lồng nhau dưới mỗi <td>. Một cách tiếp cận đơn giản như câu đố này không hoạt động - Bởi vì bề mặt có thể nhấp không nhất thiết phải bằng nhau cho mỗi cột. Đây là một mối quan tâm UX nghiêm trọng. Ngoài ra, nếu bạn cần một <button>hàng, HTML không hợp lệ để lồng nó vào bên dưới<a> thẻ (mặc dù các trình duyệt vẫn ổn với điều đó).

   Tôi đã tìm thấy 3 cách khác để thực hiện phương pháp này. Đầu tiên là ok, hai cái còn lại không tuyệt vời.

   a) Hãy xem ví dụ này :

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

   Nó hoạt động, nhưng do sự không nhất quán giữa Chrome và Firefox, nó yêu cầu hack dành riêng cho trình duyệt để khắc phục sự khác biệt. Ngoài ra, Chrome sẽ luôn căn chỉnh nội dung ô lên trên cùng, điều này có thể gây ra sự cố với các văn bản dài, đặc biệt là nếu độ cao dòng khác nhau có liên quan.

   b) Cài đặt <td>thành{ display: contents; } . Điều này dẫn đến 2 vấn đề khác:

   b1. Nếu ai đó cố gắng tạo kiểu trực tiếp cho <td>thẻ, như đặt nó thành { width: 20px; }, chúng ta cần chuyển kiểu đó bằng cách nào đó sang<a> thẻ. Chúng tôi cần một số phép thuật để làm điều đó, có thể là nhiều phép thuật hơn trong giải pháp thay thế Javascript.

   b2. { display: contents; }vẫn đang thử nghiệm; cụ thể là nó không được hỗ trợ trên Edge.

   c) Cài đặt <td>thành { height: --some-fixed-value; }. Điều này chỉ không đủ linh hoạt.

3. Cách tiếp cận cuối cùng, mà tôi khuyên bạn nên suy nghĩ nghiêm túc, là không sử dụng các hàng có thể nhấp được . Các hàng có thể nhấp không phải là một trải nghiệm UX tuyệt vời: không dễ để đánh dấu chúng một cách trực quan là có thể nhấp và nó đặt ra thách thức khi nhiều phần có thể nhấp trong các hàng, như các nút. Vì vậy, một sự thay thế khả thi có thể là chỉ có một <a>thẻ trên cột đầu tiên, được hiển thị dưới dạng một liên kết thông thường và cung cấp cho nó vai trò điều hướng toàn bộ hàng.

Đây là một cách khác ...

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>

Thay thế # bằng url, tabindex="0"làm cho bất kỳ phần tử nào có thể tập trung được

Bạn có thể cung cấp cho một hàng id, ví dụ

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

và sau đó sử dụng jquery để nói một cái gì đó như:

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

Tại sao chúng ta không nên sử dụng thẻ "div" ....

<div>

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

</div>