如何使表格中的整行都可单击作为链接?


436

我正在使用Bootstrap,但以下操作无效:

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

2
JavaScript可能对此更好
John Conde

1
他正在使用引导程序,所以我认为他应该可以做到:)
Ahmed Masud

在行前放置透明的A元素怎么样?这样,它将具有真实链接的所有属性(状态栏,中键等),并且也不会更改表的外观(如果需要)。
大卫Balažic


Answers:


568

作者注一:

请查看下面的其他答案,尤其是那些不使用jquery的答案。

作者注二:

保留后代,但肯定会在2020年采用错误的方法。

原始答案

您正在使用Bootstrap,这意味着您正在使用jQuery:^),所以一种实现方法是:

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

当然,您不必使用href或切换位置,您可以在点击处理程序功能中执行任何操作。阅读有关jQuery如何编写处理程序的内容;

使用类而不是id的优点是可以将解决方案应用于多行:

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

并且您的代码库不会改变。相同的处理程序将处理所有行。

另外一个选项

您可以这样使用Bootstrap jQuery回调(在document.ready回调中):

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

这样做的好处是不会在表排序时重置(这与其他选项一起发生)。


注意

由于已发布,window.document.location因此已过时(或至少已弃用)window.location


105
您可能还想使用css更改光标:tr.clickableRow {cursor:指针; }
Winston Kotzan

78
只是想补充一点,您不应href在上使用属性tr,因为它不是此元素的有效属性。使用数据属性代替:data-url="{linkurl}"和在js代码中:$(this).data('url')
Maksim Vi。

12
您可以避免在每一行上使用一个类,并使用一个类名来装饰表clickable_row(CamelCase违反HTML标准,并且应使用小写字母(与此同时我在跨浏览器中遇到过几次问题)),然后jQuery是$('.clickable_row tr').click(function ...But实际上,您应该使用它data-来保存数据,而不是href因为这是自定义数据的规范。data-url和jquery会像$(this).data(url);
Piotr Kula 2014年

3
仅供参考:如果可以的话,您应该在tr中为禁用Javascript的人留下一个链接。
hitautodestruct 2014年

47
该解决方案并不怎么吸引人,因为用户在悬停时不会在浏览器底部看到链接URL,更重要的是,不能滚轮单击链接以在新选项卡中将其打开。在每个单元格的内部插入a标签display: block;有点烦人,但这似乎是解决此问题的最有用的方法。
Maxime Rossini 2014年

222

你不能那样做。这是无效的HTML。您不能<a>在a <tbody>和a 之间插入a <tr>。尝试以下方法:

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

为指针视图添加样式

[data-href] { cursor: pointer; }

完成此工作后,您想使用JavaScript在HTML之外分配点击处理程序。


3
@Aquillo OP特别声明他/她正在使用引导程序。因此,在框架内使用jQuery解决方案会更好
Ahmed Masud 2013年

39
@AhmedMasud在这种情况下,是的。虽然对于任何将来的读者来说,纯JS可能是一个更好的解决方案。既然这是Stackoverflow的目的,我仍然认为我的评论是有效的。
Menno 2013年

3
行为和标记的分离当然是首选。如果有的话,我会说href不是tr上的有效属性。应该用data-href替换它,然后用$(this).data替换$(this).attr。
davidfurber

1
或者,您可以使“ .clickableRow”类事件绑定方法<a>在被单击的行中查找第一个。(这也会正常降级)
Jason Sperske 2014年

3
如果您使用的是ES6语法,则可以像这样执行链接单击:onClick={() => window.open('https://stackoverflow.com/', '_blank')}
Louie Bertoncin

186

您可以在每个中添加一个锚点<td>,如下所示:

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

然后,您可以display:block;在锚点上使用以使整行都可单击。

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

此处的示例jsFiddle。

除非您使用JavaScript,否则这可能与获得最佳效果差不多。


11
这是最好的解决方案,没有jQuery,没有JavaScript,只有CSS,即我的链接可以与<a4j:commandLink />之类的多个参数不同,不是href,所以我保留它并仅更改样式。非常感谢。
TiyebM 2015年

4
@daniel很好的答案,但是如果单元格向下延伸,则无法像jsfiddle.net/RFFy9/253
堆栈中

4
大!如果用户需要,此解决方案可以在新选项卡中打开链接。但是空列将没有链接。
IgnacioPérez'16

9
@AnnaRouben我将不得不不同意:与上行相比,拥有多个相似的链接是一个很小的缺点(没有JS的作品,屏幕阅读器可以读取链接的指向,可以按住Ctrl键单击以在新选项卡中打开。 ..)纯HTML解决方案在辅助软件中几乎总是比JS解决方案更好地工作。
JJJ'2

6
我喜欢这种解决方案,因为它的可访问性很强。用户可以浏览链接,也可以在新标签中打开链接。我在应用程序中所做的一切都放在tabindex="-1"了第一个<td>链接之外的所有内容上,因此用户逐行制表,而不是单元格制表。另外,如果要使用:focus-withinCSS伪类,仍可以突出显示/概述整个行。
乔纳森

90

链接表行是可能的,但标准<table>元素不行。您可以使用display: table样式属性来完成。这里这里有一些小提琴来演示。

这段代码可以解决这个问题:

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

请注意,由于<table>未使用标准元素,因此需要ARIA角色来确保适当的可访问性。您可能需要添加其他角色(如role="columnheader"适用)。在此处的指南中找到更多信息。


13
现在尝试将dataTables插件应用于此插件!:)
阿方索·戈麦斯

7
恕我直言,这是正确的答案,因为它保留了与链接相关的所有用户代理工具:搜索(例如/Firefox中的键),导航(tab键),复制链接位置,在新标签页/窗口中打开等,即使对于可访问的/特殊的需要浏览器。我唯一的挑剔是我不会<div>在内嵌套一个<a>,因此最好将单元格标记为<span>
Tobia'7

将第三方插件和库应用于此类CSS表可能需要更多的工作,但通常是复制粘贴和替换。例如,我只是复制了Bootstrap自己的_tables.scss和其他一些随机的片段,用我选择使用的CSS类替换了所有出现的表元素(与元素完全相同:th.th),与好处相比,实际上没有多少工作。
Tobia'7

2
不错的答案,但这只是将表用于正确对齐的一种解决方案(在许多情况下就是这种情况!)。对于表格数据,存在语义<table>是有原因的。但这仍然胜过任何JavaScript解决方案:)
Marten Koetsier

尽管这是一个非常聪明的解决方法,但仅此而已。它实际上不是一个表,因此,正如作者提到的那样,它将带来可访问性的问题。它很可能导致其他期望表但又得到表的事物出现问题。
泰森·吉比

25

使用标准Bootstrap 4.3+如下实现-无需jQuery或任何额外的CSS类!

关键是要stretched-link在单元格内的文本上使用并定义<tr>为包含块。

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

您可以用不同的方式定义包含块,例如设置transform为不值(如上例所示)。

欲了解更多信息,请阅读这里的引导文件stretched-link


1
这个答案值得更多投票。完全没有JavaScript。那是scope="row"为了什么?我不使用范围,并且该行仍然表现为链接。
Christhofer Natalius

@ChristhoferNatalius谢谢!我的原始答案不包含scope="row"-如果您想查看其他内容,请查看历史记录。不过,我没有还原编辑,因为代码片段似乎可以正常工作(与原始代码一样),并且我没有机会详尽地测试新代码:-)
克里希纳·古普塔

不利的一面是因为链接将位于列的顶部,您无法复制文本,并且如果将鼠标悬停在td中,则不会显示属性标题。因此,不幸的是,我必须回到原来的方式,仅将链接放置到一列。
Christhofer Natalius

2
我喜欢这个解决方案,但可悲的是,它不是跨浏览器的(Chrome / Firefox可以,但是Safari不行)。该问题是由于tr没有被公认的规则浏览器之间的包含块...标签stackoverflow.com/questions/61342248/...
pom421

17

更加灵活的解决方案是使用data-href属性来定位任何对象。这是您可以轻松地在不同地方重用代码。

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

然后在jQuery中,只需将具有该属性的任何元素作为目标即可:

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

并且不要忘记为CSS设计样式:

[data-href] {
    cursor: pointer;
}

现在,您可以将data-href属性添加到任何元素,它将起作用。当我像这样编写代码片段时,我喜欢它们要灵活一些。如果有的话,随时添加一个普通的js解决方案。


CSS的
出色表现

我最喜欢的解决方案。做得好
MFrazier

7

您可以使用以下引导程序组件:

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

贾斯尼(Jasny)Bootstrap

您最喜欢的前端框架缺少的组件。

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

用法

通过数据属性

将类.rowlink和属性添加data-link="row"<table><tbody>元素。对于其他选项,请将该名称附加到data-,例如,data-target="a.mainlink"可以通过将.rowlink-skip类添加到来排除单元格<td>

通过JavaScript

通过javascript调用输入掩码:

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

6

从技术上讲,有一个不错的方法是使用<a>标记里面的<tr>,这在语义上可能是不正确的(可能会向您发出浏览器警告),但是不需要JavaScript/jQuery使用:

<!-- 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:请注意,这里的窍门是将<a>标签放在最后一个元素上,否则它将尝试占用第一个元素的空间<td>单元格。

PPS:现在您的整个行都是可单击的,您也可以使用此链接在新标签页中打开(Ctrl / CMD +单击)


这基本上与我的答案相同吗?
DavidBalažic18年

虽然这个答案看起来很完美,但实际上并没有用,因为<tr>元素不能将<a>元素作为子元素。只有<td><th>是有效的孩子。参见:stackoverflow.com/questions/12634715/…–
funkybunky

5

您可以在tr中使用onclick javascript方法并使其可单击,如果由于某些细节而需要构建链接,则可以在javascript中声明一个函数并在onclick中调用它,并传递一些值。


5

这是通过在表行上放置透明A元素的方法。优点是:

  • 是真正的链接元素:悬停时更改指针,在状态栏中显示目标链接,可以通过键盘导航,可以在新选项卡或窗口中打开,可以复制URL等
  • 该表的外观与未添加链接的外观相同
  • 表代码本身没有变化

缺点:

  • 必须在脚本中设置A元素的大小,无论是在创建时还是在对其覆盖的行大小进行任何更改之后(否则都可以完全不使用JavaScript来完成,如果还设置了表大小,则仍然可以这样做)在HTML或CSS中)

该表保持原样:

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

通过在每个第一列中插入A元素并设置所需的属性,通过jQuery JavaScript添加链接(针对每一行):

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

如果使用许多填充和边距,则宽度和高度设置可能会比较棘手,但通常,关闭几个像素甚至都不会造成影响。

现场演示:http : //jsfiddle.net/qo0dx0oo/(在Firefox中有效,但在IE或Chrome中不起作用,因此该链接的位置不正确)

已修复,适用于Chrome和IE(也适用于FF):http : //jsfiddle.net/qo0dx0oo/2/


2
聪明的解决方案。我发现懒惰地创建元素,只有将鼠标悬停在行上时,才能为大表带来巨大的性能提升。
levi

1
@levi您可以就如何延迟加载提供一些反馈吗?
潜意识哈希表

@KemalEmin我假设他会使用javascriptonmouseover
brad

5

您可以将按钮角色添加到表行,并且Bootstrap将更改光标,而无需进行任何CSS更改。我决定使用该角色作为一种方法,只需很少的代码即可轻松使任何行都可单击。

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

您可以应用相同的原理将按钮角色添加到任何标签。


哇,它实际上与ui-sref而不是data-href一起工作,而没有jquery代码。只需将光标更改为手指即可。
nurp

这个工作完美感谢一吨
阿希什班纳吉

4

下面的代码将使您的整个表都可单击。单击本示例中的链接将在警报对话框中显示该链接,而不是跟随该链接。

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。


4

在我看来,一个非常简单的选择就是使用单击,并且更正确,因为这将视图和控制器分开了,并且您无需对URL进行硬编码,也无需通过单击来完成其他操作。它也可以与Angular ng-click一起使用。

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

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

例子在这里工作


1
当然,这是正确的答案。对于这样简单的事情,其他人则极其复杂。如果要更改鼠标指针,可以添加tr:hover {cursor:指针; }到您的CSS类
Tom Close

1
@TomClose取决于你想要什么行点击做到,这可能是问题,因为如导航功能就无法正常工作-在新标签/窗口打开无移位点击,悬停没有看到目的地等
NetMage

3

另一种选择是使用<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');
    });

3

我知道有人已经写了差不多相同的东西,但是我的方法是正确的方法(div不能是A的子级),并且最好使用类。

您可以使用CSS模仿表格并将A元素设为行

<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

我更喜欢使用onclick=""属性,因为对于新手来说,它易于使用和理解

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

3

这是简单的解决方案。

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

2

可以接受的答案很好,但是如果您不想在每个tr上重复网址,我建议使用一个小的替代方法。因此,您将url或href放在表的data-url中,而不是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);
    });
});

这也很好,因为您也不需要向每个tr添加click data属性。另一个好处是,我们不使用类来触发点击,因为类仅应真正用于样式设置。


2

前面未提到的一种解决方案是在单元格中使用单个链接,并使用一些CSS在单元格上扩展此链接:

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>


这看起来相当优雅。但是Google链接演示无法正常工作。Stackoverflow一个。可能只是Google像往常一样被当作驴子。也许链接到Bing :-)服务正确。无论如何v干净整洁的解决方案。
BeNice

这对我有效!不错的解决方案。要注意的一件事是:a:before的宽度必须足够长才能覆盖表格。
6

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>

尽管这里的主要解决方案很棒,但是我的解决方案消除了对类的需求。您需要做的就是添加带有URL的data-href属性。


1

我花了很多时间试图解决这个问题。

有3种方法:

  1. 使用JavaScript。明显的缺点:无法在本地打开新选项卡,并且将鼠标悬停在行上时,状态栏上将不会像常规链接一样显示任何指示。可访问性也是一个问题。

  2. 仅使用HTML / CSS。这意味着将<a>每个嵌套在下面<td>。像这样的小提琴这种简单的方法是行不通的-因为每个列的可点击表面不一定相等。这是一个严重的用户体验问题。另外,如果您需要<button>在行上使用,则将其嵌套在<a>标记下的HTML无效(尽管浏览器可以接受)。

    我发现了三种其他方法可以实现这种方法。首先还可以,其他两个都不是很好。

    a)看一下这个例子

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

    它可以工作,但是由于Chrome和Firefox之间的不一致,因此需要针对特定​​浏览器的破解来克服差异。此外,Chrome始终会将单元格内容对齐到顶部,这可能会导致长文本出现问题,尤其是在涉及行高变化的情况下。

    b)设定<td>{ display: contents; }。这导致另外两个问题:

    b1。如果其他人尝试直接设置<td>代码的样式(例如将其设置为){ width: 20px; },则需要以某种方式将该样式传递给<a>标签。我们需要一些魔术来做到这一点,这可能比Javascript替代方法中的魔术更多。

    b2。 { display: contents; }仍在实验中;特别是Edge不支持它。

    c)设定<td>{ height: --some-fixed-value; }。这只是不够灵活。

  3. 我建议认真考虑的最后一种方法是根本不使用可点击的行。可点击的行并不是很棒的UX体验:要在视觉上将它们标记为可点击并不容易,并且当行中的多个部分(例如按钮)都可点击时,会带来挑战。因此,可行的选择是<a>只在第一列上显示一个标签,将其显示为常规链接,并赋予其导航整行的作用。


0

这是另一种方式

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

      });

});

如何在新标签页中打开它?@klewis
Khushbu Vaghela

0
<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

用url替换#,tabindex="0"使任何元素都可聚焦


-1

您可以为该行指定一个ID,例如

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

然后使用jquery进行类似以下操作:

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


1
我相信您想使用class而不是id,因为您很可能将要包含多行,并且id只应用于一项。
Programmingjoe

-11

为什么我们不使用“ div”标签呢?

<div>

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

</div>

1
您应该使用CSS display:table
m1crdy

通过添加CSS来提高答案
Prathamesh更多
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.