LearnFast.Ninja

jQuery odd even table rows

Build table with many rows. Call to function that change the class only to the odd rows. Try the complete code example to see how it work.

Step 1: Build table with many rows. 

<table id="MyTable">

    <tr>

        <td>jQuery odd

        </td>

    </tr>

    <tr>

        <td>even table

        </td>

    </tr>

    <tr>

        <td>rows

        </td>

    </tr>

</table>


Step 2: Call to function that change the class only to the odd rows. 

function Change_Table_Odd_Class() {

    $("#MyTable tr:odd").addClass("MyClass");

}

 
Complete code: 

<html>

<head>

    <title>jQuery stop animation on mouseover hover</title>

    <style type="text/css">

        .MyClass {

            background-color: Black;

            color: White;

        }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <script type="text/javascript">

        function Change_Table_Odd_Class() {

            $("#MyTable tr:odd").addClass("MyClass");

        }

    </script>

</head>

<body onload="Change_Table_Odd_Class();">

    <table id="MyTable">

        <tr>

            <td>jQuery odd

            </td>

        </tr>

        <tr>

            <td>even table

            </td>

        </tr>

        <tr>

            <td>rows

            </td>

        </tr>

    </table>

</body>

</html>


Tags

jquery

odd even table