Mahmoud ElMansy: knowledge meant to be free

24 May 2011

by ElMansy

2 Comments »

CSS

,

Alternating-Table-Row-Color-with-jQuery-Css-Classes

How to make your table pretty with alternate row coloring using jQuery and CSS
First the style Sheet classes
we will make two classes to style the rows up

<style type="text/css">
<!--
table{
    width: 250px;
}
th {
    text-align: center;
    font-weight: bold;
    background: #4a70aa;
    color: #FFFFFF;
}
title_White {
    background-color: white;
    color: #000000;
    height:30px;
}
.title_White td {
    text-align: center;
    padding: 2px;
    background: #e3f0f7;
}
title_Blue{
    height:30px;
    padding: 5px 6px 5px 6px;
    background-color:#fafafa;
    color: #000000;
    }
.title_Blue td {
        background: #f7f7f7;
}
-->
</style>

This style will affect table and the two classes are for row and alternate row

Second jQuery
jQuery has powerful feature of querying the page object

<script type="text/javascript">// <![CDATA[

        $(document).ready(function() {
         $('#MyTable tr:even').removeClass('title_Blue');
                 $('#MyTable tr:odd').removeClass('title_White');
                 $('#MyTable tr:even').addClass('title_Blue');
                $('#MyTable tr:odd').addClass('title_White');
    });
// ]]></script>

this function will get all tables that has id equals “MyTable”
and will iterate through its tr tags and get even and odd rows then apply CSS classes

The Complete Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>alternating-table-row-color-with-jQuery-css-classes</title>
   <script src="Jquery.js" type="text/javascript"></script>
<script type="text/javascript">        
        $(document).ready(function() {
            $('#MyTable tr:even').removeClass('title_Blue');
            $('#MyTable tr:odd').removeClass('title_White');
            $('#MyTable tr:even').addClass('title_Blue');
            $('#MyTable tr:odd').addClass('title_White');
    });

</script>

<style type="text/css">
<!--
table{
   width: 250px;
}
th {
   text-align: center;
   font-weight: bold;
   background: #4a70aa;
   color: #FFFFFF;
}
title_White {
    background-color: white;
    color: #000000;
    height:30px;
}
.title_White td {
   text-align: center;
   padding: 2px;
   background: #e3f0f7;
}
title_Blue{
    height:30px;
    padding: 5px 6px 5px 6px;
    background-color:#fafafa;
    color: #000000;
    }
.title_Blue td {
        background: #f7f7f7;
}
-->
</style>

</head>
<body>
                   <table id="MyTable" rules="all" cellspacing="0" border="1">
        <thead>
            <tr class="">
                <th>
                    Test Column 1
                </th>
                <th>
                    Test Column 1
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
            </tr>
        </tbody>
    </table>
                       
</body>
</html>

The Table will look like this