CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Home > CodeDigest >  
Technologies
 


Styling the Alternating Row of HTML table Using jQuery
Submitted By Satheesh Babu B
On 7/20/2009 9:31:58 AM
Tags: CodeDigest,HTML,jQuery  

Styling the Alternating Row in HTML table Using jQuery

Sometimes, it is required to style the alternating row of a HTML table just like we do for databound controls like GridView, etc.  For example, there may be requirement to provide a different background color for every alternating row in a table.

The below jQuery script will help us do that,

  <script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>    

    <script language="javascript">

        $(document).ready(function() {

            $('#Students > tbody > tr:odd').css("background-color", "green");

        });

   

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <table id="Students">

    <tr><td>1</td><td>Babu</td></tr>

    <tr><td>2</td><td>Satheesh</td></tr>

    <tr><td>3</td><td>Ramesh</td></tr>

    <tr><td>4</td><td>Venki</td></tr>

    <tr><td>5</td><td>Abhishek</td></tr>

    </table>

    </div>

    </form>

 

The above code will apply the background color "green" for every alternating rows(odd). Similarly, to apply the color for even rows,

    <script language="javascript">

        $(document).ready(function() {

$('#Students > tbody > tr:even').css("background-color", "Orange");

        });   

    </script>

If you have stylesheet class for alternate rows, then you can use addClass() method instead of css().
Refer below,

<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>    

    <script language="javascript">

        $(document).ready(function() {           

            $('#Students > tbody > tr:even').addClass('row');

        });

   

    </script>

Recent Codes
  • View All Codes..