我有一个问题,我不确定它是浏览器还是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>
Run Code Online (Sandbox Code Playgroud)
我有一个jQuery函数正在搜索TD元素的内容.如果找到它,它会维护找到的类.如果找不到,则删除找到的类并添加一个未找到的类.当然,not-found只设置display:none
所以搜索功能正如我所愿.正在正确分配类.但是,我正在使用CSS伪选择器将样式应用于备用行.
tr.found:nth-child(even) {
background: #fff;
}
tr.found:nth-child(odd) {
background: #000;
}
Run Code Online (Sandbox Code Playgroud)
这在搜索发生之前效果很好.但是,在搜索并应用了未找到的类之后,伪选择器似乎仅适用于元素而不是元素和类.要么是这样,要么在页面加载期间应用伪选择器,并在该点保持静态.
我可以通过我的jQuery搜索并重新分配特定的偶数和奇数类,但这会变得混乱.它不是那么大的交易,但我的列标题是可排序的,所以我必须重新应用该事件的类,以及创建一种低效的方法来做我正在做的事情.如果数据样本太大,您可能会反复看到类更改,这是我试图避免的.
对此有何解决方案?
编辑
根据要求,我设置了一个JSFiddle,所以天才可以玩它:http://jsfiddle.net/bDePR/
寻找总统或秘书将产生这种行为.