Select table row and keep highlighted using Twitter Bootstrap

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

HTML:

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

Javascript:

$('#myTable').on('click', '.clickable-row', function(event) {  $(this).addClass('active').siblings().removeClass('active');});

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) {  if($(this).hasClass('active')){    $(this).removeClass('active');   } else {    $(this).addClass('active').siblings().removeClass('active');  }});

See @BravoZulu's answer for original information.

Try:

$(".clickable-row").click(function(){    if($(this).hasClass("highlight"))        $(this).removeClass('highlight');    else        $(this).addClass('highlight').siblings().removeClass('highlight');})

To show the painted row of a color, indicating that it is selected, you can use data-row-style = 'formatterRowUtSelect'

Inside your code, you can add this method:

formatterRowUtSelect = function (row, index) {    if (row.fieldOfMyObject == $ ('#fieldOfMyObject'). val ())        return {classes: 'row-selected'};    return {};}

Do not forget to create the css for the selected row:

.row-selected {    background-color: #a9f0ff !important;    font-weight: bold;}

I hope it serves you, Greetings.