jQuery <table> Highlight table rows appearing at odd places

Description

jQuery <table> Highlight table rows appearing at odd places

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Custom Selector</title>
<style>
    /* Some custom style */
    *{/*from w  w w . j a  v  a 2  s  .  c o  m*/
        padding: 5px;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");

});
</script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Javascript</td>
                <td>d@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>HTML</td>
                <td>b@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>CSS</td>
                <td>a@mail.com</td>
            </tr>
        </tbody>
    </table>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p>This is one more paragraph.</p>
    <form>
        <label>Name: <input type="text"></label>
        <label>Password: <input type="password"></label>
        <input type="submit" value="Sign In">
    </form>
</body>
</html>



PreviousNext

Related