如何使一个表中的整行可点击作为链接？ [英] how to make a whole row in a table clickable as a link?

问题描述

我正在使用Bootstrap，以下功能无效：

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

解决方案

您正在使用Bootstrap，这意味着您正在使用jQuery： ^），所以一种方法是：

 < tbody> 
< tr class ='clickable-row'data-href ='url：//'> 
< td> Blah Blah< / td> < TD> 1234567< / TD> < TD>£158000< / TD> 
< / tr> 
< / tbody> 
 
 
 jQuery（document）.ready（function（$）{
 $（。clickable-row）。click（function（）{
 window。 location = $（this）.data（href）; 
}）; 
}）; 
  

当然，您不必使用href或切换位置，您可以随心所欲地执行任何操作点击处理函数。阅读 jQuery 以及如何编写处理程序;

对 id 使用 class 的好处是您可以将解决方案应用于多行：

 < tbody> 
< tr class ='clickable-row'data-href ='url：// link-for-first-row /'> 
< td> Blah Blah< / td> < TD> 1234567< / TD> < TD>£158000< / TD> 
< / tr> 
< tr class ='clickable-row'data-href ='url：// some-other-link /'> 
< td>更多钱< / td> < TD> 1234567< / TD> < TD>£800000< / TD> 
< / tr> 
< / tbody> 
  

并且您的代码库不会更改。

另一个选项

您可以使用Bootstrap jQuery回调（在 document.ready callback中）：

  $（ （'click-row.bs.table'，function（e，row，$ element）{
 window.location = $ element.data（'href'）; 
} ）; 
  

这样做的好处是不会在表格分类时重置（这与其他选项有关） / p>

---

注意

由于这是张贴的 window.document.location 已过时（或至少已弃用），请改用 window.location 。

I'm using Bootstrap and the following doesn't work:

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

解决方案

You are using Bootstrap which means you are using jQuery :^), so one way to do it is:

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

Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQuery and how to write handlers;

Advantage of using a class over id is that you can apply the solution to multiple rows:

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

and your code base doesn't change. The same handler would take care of all the rows.

Another option

You can use Bootstrap jQuery callbacks like this (in a document.ready callback):

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

This has the advantage of not being reset upon table sorting (which happens with the other option).

---

Note

Since this was posted window.document.location is obsolete (or deprecated at the very least) use window.location instead.

这篇关于如何使一个表中的整行可点击作为链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！