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>