I have implemented a Bootstrap table where each row is clickable. Within one of these rows, I have added a button that serves as a link to another location. However, when I click on the button, the entire row becomes highlighted.
After some research, I discovered that in order to prevent this row highlighting behavior, I may need to implement jQuery for pagination control. Below is the current jQuery code I am using to toggle the clickable row:
$(document).ready(function() {
$('.myTable').on('click', '.clickable-row', function(event) {
$(this).toggleClass('table-warning');
});
});
I am unsure about what modifications need to be made to ensure that the row does not get highlighted when clicking on the button.
EDIT:
<table class="table table-hover" id="myTable">
<thead>
<tr class="clickable-row">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="clickable-row">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="clickable-row">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td><a class="btn btn-primary" href="#" target="_blank" role="button">Link</a></td>
</tr>
</tbody>