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

Tarun Kumar added new Article iOS : SQLite - Data Type   3 hours ago

Tarun Kumar Created New Discussion How do we create a temporary file in iOS   4 hours ago

Tarun Kumar added new Question What do you mean by " Protocol "?   5 hours ago


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