我有一个问题,我不确定是浏览器问题还是 CSS3 问题。
我有一个使用标准 HTML 表的数据网格:
<table>
<thead>
...
</thead>
<tbody>
<tr class="found">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr class="found">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr class="found">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
我有一个搜索 TD 元素内容的 jQuery 函数。如果找到,它会维护找到的类。如果未找到,则删除找到的类并添加未找到的类。自然, not-found 只是设置 display: none
所以搜索功能正在按照我想要的方式工作。班级被适当分配。但是,我使用 CSS 伪选择器将样式应用于交替行。
tr.found:nth-child(even) {
background: #fff;
}
tr.found:nth-child(odd) {
background: #000;
}
这在搜索发生之前效果很好。但是,在搜索和应用未找到的类之后,伪选择器似乎只适用于元素而不是元素和类。要么,要么在页面加载期间应用伪选择器,并在此时保持静态。
我可以通过我的 jQuery 搜索并重新分配特定的偶数和奇数类,但这会变得混乱。这没什么大不了的,但我的列标题是可排序的,所以我必须在该事件上重新应用类,同时创建一种低效的方法来做我正在做的事情。如果数据样本太大,您可能会看到类的迭代变化,这是我试图避免的。
有什么解决办法吗?
编辑
根据要求,我设置了一个 JSFiddle,以便天才可以玩弄它:http: //jsfiddle.net/bDePR/
搜索总裁或秘书将产生该行为。