用jquery的addClass方法覆盖样式表

Question

注意：加入$.tablesorter.defaults.widgets = ['zebra'];修复了这个问题。

---

我的记录的简单表被称呼交替行的颜色：

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> 

桌子是th恩做出排序使用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> 

到现在为止我仍然得到备用行着色是排序会陷入困境而我正要解决。我首先需要添加自定义样式表中的tablesorter表（均匀性）：

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; 
} 
... 

这种风格将覆盖以前的颜色交替。 所有我想知道的是在哪里放置上面的jQuery addClass调用，以便它们覆盖此样式表？

---

解决方案尝试

我试图移动addClass调用

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

这没有效果。

我又试图操纵document.styleSheets（Changing CSS Values with Javascript），它没有工作简单地改变所有的背景色的相同颜色

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

然后，我尝试，为它的地狱，使用jQuery的风格选择从我的电话上面（"#tbl_inv > tbody > tr:odd"）

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

Answer 1

你为什么不使用奇数和偶数的样式这样当表的排序行它不会弄乱颜色？

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>

Answer 2

你可以使用伪类整件事未复杂化。

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