Jabda Jabda - 2 years ago 415
Javascript Question

Select table row and keep highlighted using Twitter Bootstrap

I am using Twitter Bootstrap table with clickable rows that are highlighted when hovered over (I can get rid of the hover feature if it makes this easier). I want the selected row to remain highlighted until another row is clicked or it is reclicked.

$( document ).ready(function() {
$('#myTable').on('click', 'tbody tr', function(event) {
// console.log("test ");

and the table

<table class="table table-bordered table-hover" id="myTable">
<tr class='clickable-row'>

I tried this code in the JS but didn't work


Answer Source

You are quite close. Targeting the .clickable-row class on your $("#myTable").on(...) event and using Bootstrap's .active class should work for you:


<table class="table table-bordered" id="myTable">
  <tr class="clickable-row">
   <tr class="clickable-row">
    <th>Example 2</th>


$('#myTable').on('click', '.clickable-row', function(event) {

And a Bootply Example

Note: If you left .table-hover on your table, you'd have to use a different class than .active, such as .bg-info (which would be a blue hightlight)

To remove a highlight from the row (ie click again), check if the row has the class and remove it:

$('#myTable').on('click', '.clickable-row', function(event) {
  } else {

See @BravoZulu's answer for original information.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download