articles

Home / DeveloperSection / Articles / JQuery odd selector

JQuery odd selector

Sachindra Singh8514 22-Feb-2011

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



Updated 04-Mar-2020

Leave Comment

Comments

Liked By