Overriding a style sheet with jquery's addClass method

Question

NOTE: adding $.tablesorter.defaults.widgets = ['zebra']; fixed the issue.

I have a simple table of records that was styled to alternate row colors:

inv_style.css

.tr_evn {background-color:#FFFFFF;}
.tr_odd {background-color:#F8F8F8;}

home.html

$(document).ready(function(){
    $("#tbl_inv > tbody > tr:odd").addClass("tr_odd");
    $("#tbl_inv > tbody > tr:even").addClass("tr_evn");
});

<table id="tbl_inv">...</table>

The table was then made sortable using tablesorter

$(document).ready(function(){
    $("#tbl_inv").tablesorter();
    $("#tbl_inv > tbody > tr:odd").addClass("tr_odd");
    $("#tbl_inv > tbody > tr:even").addClass("tr_evn");
});

<table id="tbl_inv" class="tablesorter">...</table>

Up to this point I was still getting alternate row coloring that sorting would mess up and which I was about to fix. I first needed to add a custom stylesheet for the tablesorter table (for uniformity):

style_tablesorter.css

table.tablesorter{
    font-family: Arial, sans-serif; 
    background-color: #BBBBBB;
    margin:10px 0pt 15px;
    font-size: 10px;    
    text-align: left;
    padding:0px;
}
...

This style overrides the previous color alternation. All's I want to know is where to place the jquery addClass call's above so that they override this stylesheet?

Solution Attempts

I tried moving the addClass calls to

$(document).load()
$(window).ready()
$(window).load()

which had no effect.

I then tried manipulating document.styleSheets (Changing CSS Values with Javascript) which did work to simply change all the background-color's to the same color

var ss = document.styleSheets[x];  //x: index of style_tablesorter.css    
var rules = ss[document.all ? 'rules' : 'cssRules'];

for(var i=0; i<rules.length; i++) {
    rules[i].style.setProperty("background-color","white");             
}

I then tried, for the hell of it, using a the jquery style selector from my calls above ("#tbl_inv > tbody > tr:odd")

for(var i=0; i<rules.length; i++) {
    rules[i].addRule("#tbl_inv > tbody > tr:odd", "background-color: white");
}

Your problem is caused by the fact that you're using even and odd classes rather than css to solve this. :) — Kevin B, Feb 04 '16 at 18:49
It was what I got to first work originally, and haven't pursued an alternative solution since. I'm open to suggestions. — samus, Feb 04 '16 at 18:49
http://caniuse.com/#feat=css-sel3 nth child selectors have been supported since IE9 (and all modern browsers), so you can safely use that in most situations now days. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child — Kevin B, Feb 04 '16 at 18:52
@KevinB I just found the line `table.tablesorter tbody tr.odd td {...}` in the tablesorter style sheet. Is this not CSS? I understand that the `even` and `odd` in addClass are jquery specific, but what about this case? — samus, Feb 04 '16 at 19:08
well, yeah, that's css, but it's using classes rather than nth-child, so sorting it without updating those classes would result in out of sync alternating row colors. Having to update classes every time a sort or search happens is not very efficient either, compared to the css only solutions that wouldn't have to touch the dom at all. — Kevin B, Feb 04 '16 at 19:09
My guess is the tablesorter plugin includes that so that it can claim to be IE8 compatible. — Kevin B, Feb 04 '16 at 19:11

score 2 · Accepted Answer · answered Feb 04 '16 at 18:53

Why are you not using even and odd to style the rows that way when the table is sorted it does not mess up the colors?

tbody tr:nth-child(even) td{
   background-color: #aaa;
}

tbody tr:nth-child(odd) td{
   background-color: #cfc;
}

table { border-collapse: collapse}

<table>
  <tbody>
    <tr><td>1</td><td>1</td></tr>
    <tr><td>2</td><td>2</td></tr>
    <tr><td>3</td><td>3</td></tr>
    <tr><td>4</td><td>4</td></tr>
    <tr><td>5</td><td>5</td></tr>
  </tbody>
</table>

`$.tablesorter.defaults.widgets = ['zebra'];` fixed it. – samus Feb 05 '16 at 14:24 — samus, Feb 05 '16 at 14:24

score 1 · Answer 2 · answered Feb 04 '16 at 18:53

1

You could un-complicate the whole thing using pseudo-classes.

tr:nth-child(even) { background: #fff; }
tr:nth-child(odd) { background: #f8f8f8; }

answered Feb 04 '16 at 18:53

robbclarke

749
3
9

Overriding a style sheet with jquery's addClass method

2 Answers2