jquery 保持表行颜色交替,即使某些行被隐藏而无法进行筛选

thtygnil  于 2023-10-17  发布在  jQuery
关注(0)|答案(3)|浏览(92)

在下面的页面中,我使用内置的HTML表格功能来显示一个自动具有交替背景行颜色的表格:
http://www.realitysharesadvisors.com/divcon/#table
但是,如果用户使用表格正上方的彩色按钮,根据特定的条件过滤表格显示的信息,则会导致某些特定行隐藏,因此剩余的行将失去自动交替的行颜色。
由于我使用的是原生HTML表格功能,您对如何在应用过滤器并隐藏行时保持交替的行颜色有什么建议吗?

r1zhe5dt

r1zhe5dt1#

或者,使用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>

执行函数:updateList(),每次隐藏/显示此表中的一行时。

fumotvh3

fumotvh32#

<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来实现。

2w2cym1i

2w2cym1i3#

使用纯css,
假设筛选的行添加了“.dn”类。

tbody>tr:nth-child(odd){
    background-color: #f9f9f9;
}
tbody>tr:nth-child(odd of :not(.dn)){
    background-color: #f9f9f9;
} 

tbody>tr:nth-child(even of :not(.dn)) {
  background-color: #fff;
}

相关问题