下面的代码将使您的整个表可点击。单击本例中的链接将在警告对话框中显示该链接，而不是按照该链接进行操作。

HTML:

下面是上面例子背后的HTML:

    <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

而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

最后是jQuery，它使魔术发生:

    $(document).ready(function() {

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

});

它所做的是，当单击一行时，搜索属于锚的href。如果找到一个，则将窗口的位置设置为该href。

下面的代码将使您的整个表可点击。单击本例中的链接将在警告对话框中显示该链接，而不是按照该链接进行操作。

HTML:

下面是上面例子背后的HTML:

    <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

而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

最后是jQuery，它使魔术发生:

    $(document).ready(function() {

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

});

它所做的是，当单击一行时，搜索属于锚的href。如果找到一个，则将窗口的位置设置为该href。

这里有一个通用的方法。定义这个css:

// css
td a.linker {
    color:#212529;
    display: block;
    padding: 16px;
    text-decoration: none;
}

然后把这个放在每个td里:

<td>
  <a class="linker" href="www.google.com"> 
    Cell content goes here 
  </a>
</td>

另一种选择使用<a>， CSS位置和一些jQuery或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;
}

然后你需要给一个宽度，使用例如jQuery:

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

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

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

你可以给行一个id，例如。

<tr id=“special”> ... </tr>

然后使用jquery说:

$(' #特别').onclick(函数(){窗口= " http://urltolinkto.com/x/y/z ";})

这里有一篇文章解释了如何在2020年做到这一点:https://www.robertcooper.me/table-row-links

这篇文章解释了3种可能的解决方案:

使用JavaScript。 用锚定元素包装所有表单元格。 使用<div>元素代替原生HTML表格元素，以使表格行为<a>元素。

本文深入讨论了如何实现每个解决方案(使用到codedependency的链接)，还考虑了一些边缘情况，例如如何处理希望在表单元格中添加链接的情况(嵌套<a>元素不是有效的HTML，因此需要解决这个问题)。

正如@gameliela所指出的，找到一种不将整行作为链接的方法也是值得的，因为这将简化许多事情。然而，我确实认为，将整个表行作为一个链接来点击是一种很好的用户体验，因为用户可以方便地单击表上的任何位置来导航到相应的页面。