Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to represent the odd/even rows using alternate colors

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 117
    Comment on it

    We can create odd/even stripes with different alternate colors which is easier to identify and good to represent the data in alternate color format.

    We can use the css method to color the even/odd rows using class selectors. This is the case when the listing is not being generated automatically, but when our listing is generated dynamically and we have to delete the rows or add another it's little difficult to manage alternate color representation for the listing hence we use jQuery to handle this problem, which has been explained with the help of an example below:


    Example:

    <!--doctype html-->
    <html>
        <head>
            <title>Example addClass Jquery</title>
            <style type='text/css'>
            tr {
                    background-color:#FFFF00;
                }
    
            .changecolor {
                    background-color:#F4E095    ;
                }
    
    </style>
    </head>
    <body>
        <p style="margin-left:150px;">List of Events</p>
    <table>
    
        <tbody>
    
            <tr>
                <td>Aerobatics</td><td>Event Date: 11-02-2016 </td><td> 5 teams</td>
            </tr>
    
            <tr>
                <td>Gliding</td><td>Event Date: 14-02-2016 </td><td> 3 teams</td> 
            </tr>
    
            <tr>
                <td>Ballooning</td><td>Event Date: 07-03-2016 </td><td> 4 teams</td>
            </tr>
    
            <tr>
                <td>Parachuting</td><td>Event Date: 14-03-2016</td><td> 6 teams</td>
            </tr>
    
            <tr>
                <td>Paragliding </td><td>Event Date: 02-05-2016</td><td> 4 teams</td>
            </tr>
    
            <tr>
                <td>Swimming</td><td>Event Date:11-02-2016</td><td>2 teams</td>
            </tr>
    
            <tr>
                <td>Diving</td><td>Event Date:11-02-2016</td><td>3 teams</td>
            </tr>
    
            <tr>
                <td>Water aerobics</td><td>Event Date:11-02-2016</td><td>4 teams</td>
            </tr>
    
            <tr>
                <td>Water Polo</td><td>Event Date:11-02-2016</td><td>2 teams</td>
            </tr>
    
            <tr>
                <td>Aquajogging </td><td>Event Date:11-02-2016</td><td>5 teams</td>
            </tr>
        </tbody>    
    </table>
    
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    
     $(document).ready(function() {
    
        $('tr:even').addClass('changecolor');
     });
    
    </script>
    
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: