Bootstrap 4-有没有办法让表格行可点击？ [复制]

Posted 2023-03-05

【中文标题】Bootstrap 4-有没有办法让表格行可点击？ [复制]

【英文标题】：Bootstrap 4- Is there a way to make a table row clickable? [duplicate]

【发布时间】：2017-07-09 01:41:48

【问题描述】：

我在 B4 中使用了“table-hover”，是否可以在悬停的表格行中添加一个 href 以便它们实际上是可点击的？

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

***.com/questions/17147821/…

为什么可以点击？导航或显示/隐藏内容？

【参考方案1】：

这是一种方法。请注意，我在这里使用 javascript，但使用的是 window.location.assign('http://www.google.com');将做与“href”相同的事情。注意单引号，而不是双引号。

function hello(text) 
alert(text);

.table-hover tr:hover 
background:#00ff00;

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="hello('row 1')">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr onclick="window.location.assign('http://www.google.com');">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr onclick="hello('row 3')">
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

【讨论】：

如果你想让光标变成手形来表示可点击区域，也可以在样式中添加cursor: pointer;。