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

Question

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

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