Javascript 使用jquery'覆盖样式表；s addClass方法

注意：添加

$.tablesorter.defaults.widgets=['zebra']修复了该问题


我有一个简单的记录表，其样式为交替的行颜色：

inv_style.css

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

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

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>

到目前为止，我仍然得到交替的行着色，排序将混乱，我将要修复。我首先需要为tablesorter表添加一个自定义样式表（为了统一）：

style\u tablesorter.css

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

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

此样式将替代以前的颜色替换我想知道的是将jquery addClass调用放在上面的什么位置，以便它们覆盖此样式表？


解决方案尝试

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

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

我尝试将addClass调用移动到


$（document）.load（）
$（窗口）.ready（）
$（窗口）.load（）

没有效果

然后，我尝试操作
document.styleSheets
（），它可以简单地将所有背景颜色更改为相同的颜色

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

为什么不使用偶数和奇数来设置行的样式，以便在对表进行排序时不会弄乱颜色


tbody tr:n个孩子（偶数）td{
背景色：#aaa；
}
t车身tr:n个儿童（奇数）td{
背景色：#cfc；
}
表{边框折叠：折叠}

11
22
33
44
55
为什么不使用偶数和奇数来设置行的样式，以便在对表格进行排序时不会弄乱颜色


tbody tr:n个孩子（偶数）td{
背景色：#aaa；
}
t车身tr:n个儿童（奇数）td{
背景色：#cfc；
}
表{边框折叠：折叠}

11
22
33
44
55
您可以使用伪类来解除整个过程的复杂性

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

您可以使用伪类来解除整个过程的复杂性

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

你为什么使用奇偶类？你的问题是因为你使用奇偶类而不是css来解决这个问题这是我最初开始工作的地方，从那以后就再也没有其他的解决方案了。我愿意接受建议。自从IE9（以及所有现代浏览器）以来，第n个子选择器就得到了支持，所以现在在大多数情况下，您都可以安全地使用它。是的，这是css，但它使用的是类而不是第n个子类，所以在不更新这些类的情况下对其进行排序会导致行颜色不同步。每次排序或搜索时都必须更新类，这与完全不需要触及dom的仅css的解决方案相比也不是很有效。为什么要使用偶数和奇数类？您的问题是因为您使用偶数和奇数类而不是css来解决此问题。：）这是我最初开始工作的地方，从那以后就再也没有其他的解决方案了。我愿意接受建议。自从IE9（以及所有现代浏览器）以来，第n个子选择器就得到了支持，所以现在在大多数情况下，您都可以安全地使用它。是的，这是css，但它使用的是类而不是第n个子类，所以在不更新这些类的情况下对其进行排序会导致行颜色不同步。与完全不需要接触dom的仅css的解决方案相比，每次排序或搜索时都必须更新类也不是非常有效修复了它。
$.tablesorter.defaults.widgets=['zebra']修复了它。