Bootstrap 4- Есть ли способ сделать строку таблицы нажатой?

Question

Я использую «стол-зависание» в 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 ('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>