Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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">
    <tbody>
        <tr>
        <tr class='clickable-row'>

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

$(this).addClass('highlight').siblings().removeClass('highlight');
like image 715
Jabda Avatar asked Jul 30 '15 17:07

Jabda


People also ask

How to highlight a table row in bootstrap?

Bootstrap Highlight Table Row On Hover: To highlight table row on hover in bootstrap, you have to simply use . table-hover class with table element. There's no need for javascript.

How do you highlight rows in a table?

To select an entire table, click in the table, and then click the Table Move Handle in the upper-left corner. To select a row, column, cell, or group of cells, click and drag your mouse pointer to highlight the cells you want.

How do I highlight a row in a table in HTML?

When you create Web pages in HTML, you can use JavaScript functions to alter the appearance of page elements on user interaction. To highlight certain rows in a table, you can set Cascading Style Sheet declarations for these rows in their normal state and in their highlighted state.


3 Answers

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.

like image 191
Tim Lewis Avatar answered Oct 19 '22 21:10

Tim Lewis


Try:

$(".clickable-row").click(function(){
    if($(this).hasClass("highlight"))
        $(this).removeClass('highlight');
    else
        $(this).addClass('highlight').siblings().removeClass('highlight');
})
like image 23
BravoZulu Avatar answered Oct 19 '22 22:10

BravoZulu


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.

like image 2
RyuSaky Avatar answered Oct 19 '22 20:10

RyuSaky