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>

然后使用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

为什么在表格排序时你不使用偶数和奇数来设置行的样式它不会弄乱颜色？

＆＃13;

tbody tr:nth-child(even) td{
   background-color: #aaa;
}

tbody tr:nth-child(odd) td{
   background-color: #cfc;
}

table { border-collapse: collapse}

＆＃13;

<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>

＆＃13;

Answer 2

你可以使用伪类来解决整个问题。

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

使用jquery的addClass方法覆盖样式表

2 个答案: