Adding css class on click won't apply on all rows - Bootstrap Table

Question

I'm adding an a css class which should colour row which is currently clicked, and I realized that it's working on every second row, on first row it wont work, on second row it will work an so on, I cant understand why is that happening?

I must say also that I'm using bootstrap table on my view, and table rows are dynamically created, but all of them should be the same.

Here is how my table looks after rows are added:

I noticed by default that rows are colour differently, that's how bootstrap table works I guess

And this is what is happened when I selected second row, it looks like this:

But when I'm clicking on a row 1 and on a row 3 nothing is happening even if I can see when I'm inspecting page that class is applied to row that I'm selecting.

My js:

$('#TableItems').on('click', 'tr', function (e) {
    $(this).addClass('lol').siblings().removeClass('lol');
});

My css:

.lol
{
    background: gray;
}

Please post the markup as well and if possible using snippets create a Minimal, Complete, and Verifiable example — Nope
– Nope, Commented Sep 15, 2017 at 8:59
Don't start fixing an issue with !important that just leads to more issues further on. IMHO - CSS quickly ends up with every single line being marked as !important — Nope
– Nope, Commented Sep 15, 2017 at 9:00
Zakaria Acharki check the link itself.the row which have color already is not getting new color — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Sep 15, 2017 at 9:10

Zakaria Acharki · Accepted Answer · 2017-09-15 17:45:53Z

2

Working fiddle.

You could attach the class to the td's instead and make CSS more specific rule to override the one already applied.

CSS:

#TableItems>tbody>tr>td.lol
{
    background-color: gray;
}

JS :

$('#TableItems').on('click', 'tr', function (e) {
  $('td',this).addClass('lol');
  $(this).siblings().find('td').removeClass('lol');
});

Hope this helps.

$('#TableItems').on('click', 'td', function (e) {
  $('td').siblings().addClass('lol');
  $(this).closest('tr').siblings().find('td').removeClass('lol');
  
  console.log($(this).prop('id'));
});

#TableItems>tbody>tr>td.lol
{
    background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="row">
 <div class="col-md-12">
  <table id="TableItems" class="table table-striped table-bordered table-hover dataTable">
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
    <tr>
      <td id="id_1">test id 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td id="id_2">test id 2</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
 </div>
</div>

edited Sep 15, 2017 at 17:45

answered Sep 15, 2017 at 9:17

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Master Yoda Over a year ago

If you move the jquery.js script reference above the bootstrap.js reference in your snippet it will get rid of that script error in your example.

Roxy'Pro Over a year ago

@ZakariaAcharki It works, but can you explain little bit why this example works and my example did not work?

Zakaria Acharki Over a year ago

Since the rule the must specific have the max priority against the less specific in CSS rules, your rule target any element with lol class when Bootstrap has already more specific rule that target the td and change his color .table-hover>tbody>tr>td.. To override it you should make a rule that is more specific as my answer provide.. That why

Roxy'Pro Over a year ago

@ZakariaAcharki Thanks man,and in case each of this rows and td has some id, why can't I access it by $(this).data('id'); ?

Zakaria Acharki Over a year ago

You're welcome, Should be retrieved using $(this).attr('id'); or $(this).prop('id');.

|

Sabin · Accepted Answer · 2017-09-15 09:24:56Z

0

JS should be:

        $('#TableItems').on('click', 'tr', function (e) {
            $(this).parent().find('tr').removeClass('lol');
            $(this).addClass('lol');
        });

answered Sep 15, 2017 at 9:24

Sabin

311 silver badge3 bronze badges

Comments

Master Yoda · Accepted Answer · 2017-09-15 09:46:20Z

If you absolutely have to use the !important rule to override any currently applied styles, for example on the bootstrap .table-striped class. Consider creating a list of classes that perform dedicated styling functions and are named appropriately to make sure its entirely obvious what they do.

The example below has renamed your .lol class to .greyBackground_OVERRIDE this indicates that you have overriden any previous values that existed on the element.

Please be aware that if you do not keep track of where you use the !Important rule it can cause serious styling issues later down the line.

$('#TableItems').on('click', 'tr', function(e) {
  $(this).addClass('greyBackground_OVERRIDE').siblings().removeClass('greyBackground_OVERRIDE');
});

/*
  I recommend using the _OVERRIDE naming convention for these type of classes
*/
.greyBackground_OVERRIDE
{
  /* 
    makes use of the !important rule which gives this style preference over any others. 
  */
  background: grey !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped" id="TableItems">
  <thead>
    <tr>
      <th> test </th>
      <th> test 2 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 1 </td>
      <td> 2 </td>
    </tr>
    <tr>
      <td> 3 </td>
      <td> 4 </td>
    </tr>
    <tr>
      <td> 5 </td>
      <td> 6 </td>
    </tr>
    <tr>
      <td> 7 </td>
      <td> 8 </td>
    </tr>
    <tr>
      <td> 9 </td>
      <td> 10 </td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

Adding css class on click won't apply on all rows - Bootstrap Table

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related