Question

在下一页中，我使用内置的HTML表功能来显示一个自动具有交替背景行颜色的表：

http://www.realitysharesadvisors.com/divcon/#table

但是，如果用户使用表格正上方的彩色按钮，根据某些条件过滤表格中显示的信息，那么会导致某些特定行被隐藏，因此其余行会丢失自动交替行颜色。

由于我使用原生HTML表功能，您是否有任何关于如何在应用过滤器时保持交替行颜色并且行变为隐藏的建议？

Answer 1

 <style type="text/css">
    .TFtable{
        width:100%; 
        border-collapse:collapse; 
    }
    .TFtable td{ 
        padding:7px; border:#4e95f4 1px solid;
    }
    /* provide some minimal visual accomodation for IE8 and below */
    .TFtable tr{
        background: #b8d1f3;
    }
    /*  Define the background color for all the ODD background rows  */
    .TFtable tr:nth-child(odd){ 
        background: #b8d1f3;
    }
    /*  Define the background color for all the EVEN background rows  */
    .TFtable tr:nth-child(even){
        background: #dae5f4;
    }
</style>
<table class="TFtable">
    <tr><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>Text</td><td>Text</td><td>Text</td></tr>
</table>

你可以通过CSS实现这一点。

Answer 2

或者，使用jQuery（javascript）和这些CSS参数来获得所需的结果：

添加两个新的CSS类：

<style type="text/css">
.TFtable tr.even {
    background: #dae5f4;
}
    .TFtable tr.odd {
    background: #b8d1f3;
}
</style>

最后是一些jQuery脚本：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>    
<script>
    function updateRows() {
        $("table.TFtable tr:visible:odd").addClass("odd");
        $("table.TFtable tr:visible:even").addClass("even");
    }
</script>

每次隐藏/显示此表中的一行时，执行函数：updateRows（）。

即使某些行在过滤时隐藏，也要保持表行颜色交替

2 个答案: