CODEWITHSUNDEEP
jqueryhtml-table
Kian Salehizadeh
Kian Salehizadeh

Reputation: 21

Keep table row colors alternating even as some rows get hidden from filtering

On the following page, I use the built-in HTML table functionality to display a table that automatically has alternating background row colors:

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

However, if a user uses the colored buttons right above the table to, based on certain criteria, filter the information the table shows, then that causes some specific rows to become hidden, and so the remaining rows lose the automatic alternating row colors.

As I'm using the native HTML table functionality, do you have any suggestions on how to maintain the alternating row colors when filters are applied and rows then become hidden?

Upvotes: 0

Views: 1589

Answers (3)

Hakan
Hakan

Reputation: 599

With pure css it is possible

Assume that filtered rows are added '.dn' class.

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

Upvotes: 1

Ren
Ren

Reputation: 330

Or, make use of jQuery (javascript) and these CSS parameters to arrive at desired result:

Add two new CSS classes:

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

And finally some jQuery scripts:

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

Execute the function: updateRows(), each time you hide/show a row from this table.

Upvotes: 1

rupesh_padhye
rupesh_padhye

Reputation: 1405

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

you can achieve this via CSS.

Upvotes: 0

Related Questions