CODEWITHSUNDEEP
javascriptjqueryhtmlcss
samus
samus

Reputation: 6202

Overriding a style sheet with jquery's addClass method

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

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");
}

Upvotes: 0

Views: 101

Answers (2)

robbclarke
robbclarke

Reputation: 749

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

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

Upvotes: 1

epascarello
epascarello

Reputation: 207557

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>

Upvotes: 2

Related Questions