Question

我正在使用＆＃39; table-hover＆＃39;在B4中，无论如何都要将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>

Answer 1

这是实现目标的一种方式。请注意，我在这里使用Javascript，但使用window.location.assign（＆＃39; http://www.google.com＆＃39;）;将做与＃34; href＆＃34;相同的事情。注意单引号，而不是双倍。

＆＃13;

function hello(text) {
alert(text);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap 4-有没有办法让表格行可点击？

1 个答案: