Tôi không thể đặt hàng trong bảng của mình dưới dạng liên kết đến một cái gì đó. Tôi chỉ có thể sử dụng css và html. Tôi đã thử nhiều thứ khác nhau từ div liên tiếp sang thứ khác, nhưng vẫn không thể làm cho nó hoạt động.

Bạn có hai cách để làm điều này:

• Sử dụng javascript:

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

• Sử dụng neo:

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

Tôi đã thực hiện tác phẩm thứ hai bằng cách sử dụng:

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

Để loại bỏ khoảng trống giữa các cột:

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

Đây là một bản demo đơn giản của ví dụ thứ hai: DEMO

Tôi đã tạo cho mình một hàm jquery tùy chỉnh:

Html

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

jQuery

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

Dễ dàng và hoàn hảo cho tôi. Hy vọng rằng nó sẽ giúp bạn.

(Tôi biết OP chỉ muốn CSS và HTML, nhưng hãy xem xét jQuery)

Biên tập

Đồng ý với Matt Kantor bằng cách sử dụng trình đính kèm dữ liệu. Câu trả lời đã chỉnh sửa ở trên

Nếu bạn đang sử dụng trình duyệt hỗ trợ nó, bạn có thể sử dụng CSS để chuyển đổi <a>thành một hàng trong bảng:

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

Tất nhiên, bạn bị hạn chế không đặt các phần tử khối bên trong <a>. Bạn cũng không thể trộn thứ này với<table>

Nếu bạn phải sử dụng một bảng, bạn có thể đặt một liên kết vào mỗi ô trong bảng:

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

Và làm cho các liên kết lấp đầy toàn bộ các ô:

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

Nếu bạn có thể sử dụng <div>s thay vì một bảng, thì HTML của bạn có thể đơn giản hơn rất nhiều và bạn sẽ không nhận được "khoảng trống" trong các liên kết, giữa các ô trong bảng:

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

Đây là CSS đi kèm với <div>phương thức:

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

Cách thông thường là gán một số JavaScript cho onClickthuộc tính của TRphần tử.

Nếu bạn không thể sử dụng JavaScript, thì bạn phải sử dụng một thủ thuật:

1. Thêm liên kết giống nhau vào từng TDhàng giống nhau (liên kết phải là phần tử ngoài cùng trong ô).

2. Biến các liên kết thành các phần tử khối: a { display: block; width: 100%; height: 100%; }

Sau đó sẽ buộc liên kết lấp đầy toàn bộ ô nên việc nhấp vào bất kỳ đâu sẽ gọi liên kết.

Bạn không thể bao bọc một <td>phần tử bằng <a>thẻ, nhưng bạn có thể hoàn thành chức năng tương tự bằng cách sử dụng onclicksự kiện để gọi một hàm. Một ví dụ được tìm thấy ở đây , giống như hàm này:

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

Và thêm nó vào bảng của bạn như thế này:

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

Câu trả lời từ sirwilliam phù hợp với tôi nhất. Tôi đã cải thiện Javascript với sự hỗ trợ cho phím nóng Ctrl + LeftClick (mở trang trong tab mới). Sự kiện ctrlKeyđược sử dụng bởi PC, metaKeybởi 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;
    }
});

Thí dụ

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

Tôi biết câu hỏi này đã được trả lời nhưng tôi vẫn không thích bất kỳ giải pháp nào trên trang này. Đối với những người sử dụng JQuery, tôi đã đưa ra một giải pháp cuối cùng cho phép bạn cung cấp cho hàng của bảng gần như cùng một hành vi với <a>thẻ.

Đây là giải pháp của tôi:

jQuery Bạn có thể thêm ví dụ này vào tệp javascript chuẩn được bao gồm

$('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 Bây giờ bạn có thể sử dụng nó trên bất kỳ <tr>phần tử nào bên trong HTML của bạn

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

Khi tôi muốn mô phỏng một <tr>liên kết nhưng tôn trọng các tiêu chuẩn html, tôi làm điều này.

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*/
}

Theo cách này, khi ai đó di chuột vào TR, tất cả hàng (và các liên kết này) sẽ có kiểu di chuột và anh ta không thể thấy rằng có nhiều liên kết.

Hi vọng có thể giúp được ai đó.

Chơi thử TẠI ĐÂY

Điều này giúp bạn không phải sao chép liên kết trong tr - chỉ cần lấy nó ra từ đầu tiên 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>

Có lẽ gì đó dọc theo những dòng này? Mặc dù nó sử dụng JS, nhưng đó là cách duy nhất để làm cho một hàng (tr) có thể nhấp được.

Trừ khi bạn có một ô duy nhất với thẻ liên kết lấp đầy toàn bộ ô.

Và sau đó, bạn không nên sử dụng một cái bảng.

Sau khi đọc chủ đề này và một số chủ đề khác, tôi đã đưa ra giải pháp sau trong 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"));

Để sử dụng nó đặt href trong tr / td / th mà bạn mong muốn được nhấp như: <tr href="http://stackoverflow.com">. Và đảm bảo rằng tập lệnh trên được thực thi sau khi phần tử tr được tạo (theo vị trí của nó hoặc sử dụng trình xử lý sự kiện).

Nhược điểm là nó sẽ không hoàn toàn làm cho các TR hoạt động như các liên kết như với div với display: table;và chúng sẽ không thể chọn bàn phím hoặc có văn bản trạng thái. Chỉnh sửa: Tôi đã làm cho điều hướng bàn phím hoạt động bằng cách đặt onkeydown, role và tabIndex, bạn có thể loại bỏ phần đó nếu chỉ cần chuột. Tuy nhiên, họ sẽ không hiển thị URL trên thanh trạng thái khi di chuột.

Bạn có thể tạo kiểu cụ thể cho liên kết TR bằng bộ chọn CSS "tr [href]".

Tôi có một cách khác. Đặc biệt nếu bạn cần đăng dữ liệu bằng 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";
    });
});

Đặt biến thiết lập các biến trong SESSIONS mà trang bạn sắp truy cập có thể đọc và hành động.

Tôi thực sự muốn một cách đăng thẳng đến vị trí cửa sổ, nhưng tôi không nghĩ là có thể.

Cảm ơn vì điều đó. Bạn có thể thay đổi biểu tượng di chuột bằng cách gán một lớp CSS cho hàng như:

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

và CSS trông giống như:

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

Bạn có thể thêm thẻ A vào hàng không?

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

Đây có phải là những gì bạn đang hỏi?