Home > DeveloperSection > Articles > JQuery odd selector

JQuery odd selector

Posted by  Sachindra Singh
on    February-22-2011 14:34 PM

JQuery JQuery 
Ratings:
0 Comment(s)
 2671  View(s)
Rate this:

JQuery odd selector

When we want to display large chunks of data in a single page then we can use JQuery odd Selector. For example when we want to see data in readable format, then we can apply css on table to show data where table row index is (odd)1, 3, and 5… In this article I am trying to show you, how we can use odd selector.

Syntax:  (“tr: odd”) .css();

Code:

<title>JQuery odd selector</title>

 

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

 

    <script type="text/javascript">

        $(document).ready(function        {

            $("tr:odd").css("color", "blue");//css will apply on table where row index is odd

            $("tr:odd").css("font-size", "20");

        });

    </script>

 

</head>

<body>

    <h2>

        JQuery odd and even method</h2>

    <table width="300">

        <tr>

            <th>

                Id

            </th>

            <th>

                Name

            </th>

            <th>

                City

            </th>

            <th>

                Age

            </th>

        </tr>

        <tr>

            <td align="center">

                S001

            </td>

            <td align="center">

                Sachin

            </td>

            <td align="center">

                Allahabad

            </td>

            <td align="center">

                23

            </td>

        </tr>

        <tr>

            <td align="center">

                S002

            </td>

            <td align="center">

                Raj

            </td>

            <td align="center">

                Varanasi

            </td>

            <td align="center">

                21

            </td>

        </tr>

        <tr>

            <td align="center">

                S003

            </td>

            <td align="center">

                Sameer

            </td>

            <td align="center">

                Lucknow

            </td>

            <td align="center">

                25

            </td>

        </tr>

        <tr>

            <td align="center">

                S004

            </td>

            <td align="center">

                Manish

            </td>

            <td align="center">

                Delhi

            </td>

            <td align="center">

                24

            </td>

        </tr>

        <tr>

            <td align="center">

                S005

            </td>

            <td align="center">

                Kajal

            </td>

            <td align="center">

                Kanpur

            </td>

            <td align="center">

                26

            </td>

        </tr>

    </table>

</body>

When page will be run all odd indexes record font color will blue and size also cahnge as shown below:

JQuery odd selector
















Recent Activities



Anchal Kesharwani added new Blog JSON Syntax   yesterday

Anchal Kesharwani added new Article How to Send Mail in Node.JS   yesterday

Top Contributors

Don't want to miss updates? Please click the below button!