Question

I am trying to make a whole table row clickable and have done so using javascript. However, this does not let you see the target link in the status bar and also prevents you from opening these links in new tabs.

Therefore, I have been trying the following:

<tr>
  <td><a href="#">@Html.ActionLink(...)</a></td>
  <td><a href="#">@Html.ActionLink(...)</a></td>
  <td><a href="#">@Html.ActionLink(...)</a></td>
</tr>

Then using display:block; on the anchors to make the full row clickable.

tr:hover { 
   background: red; 
}

td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

However, I can no longer click the action link, wherever I click on the table row, it takes me to whatever I have in the anchor.

That leads me to my question. How can I make it so that if I click anywhere in the row, it takes me to my anchor, but if I click precisely on the action link, it takes me to where that is set.

Any help is greatly appreciated.

Answer 1

有人为Bootstrap 3编写了一个插件，这使得这很容易。 Jasny Bootstrap有＆＃34; Row Links＆＃34;允许您执行以下操作：

<tbody data-link="row" class="rowlink">
<tr>
    <td><a href="#wholerow">First Link</a></td>
    <td>Some text</td><td class="rowlink-skip"><a href="#">Action</a></td>
</tr>
</tbody>

整行将链接到#wholerow，<a>标记将链接到#

在可点击框内设置可点击链接（<a href="">)

1 个答案: