Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## jQuery: Table Striping

Let's get started with jQuery by "striping" a table. The plain table comes from a list of United States Senators.

- Plain table: senate-plain.html
- Striped table: senate-striped.html
  Include some Javascript libraries (`jquery.js`) and write a function that selects the table rows and applies a class. Note that the jQuery selectors are like CSS selectors (and here we see custom jQuery selectors of `:even` and `:odd`).

    <script type="text/javascript" src="../js/jquery.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
        {
            $("#senatetable tbody tr:even").addClass('evenRow');
            $("#senatetable tbody tr:odd").addClass('oddRow');
        }
    );
    </script>

Plain table:

Striped table:

Copyright © David Heitmeyer