jQuery Advanced Row Striping

alt

Sponsored links

Online Training

Learn Microsoft

Data Management

Learn Programming

Learn Networking

Software Testing

Certification Help

Career Improvement

Employment Help

Privacy and Legal

jQuery Advanced Row Striping

Site Search

jQuery Advanced Row Striping

element and use for the subheading. Such a table's HTML (in abridged form) would look like this:


<table class="striped">
    <thead>
        <tr>
            <th>Date</th>
            <th>Headline</th>
            <th>Author</th>
            <th class="filter-column">Topic</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="4">2007</th>
        </tr>
        <tr>
            <td>Mar 11</td>
            <td>SXSWi jQuery Meetup</td>
            <td>John Resig</td>
            <td>conference</td>
        </tr>
        <tr>
            <td>Feb 28</td>
            <td>jQuery 1.1.2</td>
            <td>John Resig</td>
            <td>release</td>
        </tr>
        <tr>
            <td>Feb 21</td>
            <td>jQuery is OpenAjax Compliant</td>
            <td>John Resig</td>
            <td>standards</td>
        </tr>
        <tr>
            <td>Feb 20</td>
            <td>jQuery and Jack Slocum's Ext</td>
            <td>John Resig</td>
            <td>third-party</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th colspan="4">2006</th>
        </tr>
        <tr>
            <td>Dec 27</td>
            <td>The Path to 1.1</td>
            <td>John Resig</td>
            <td>source</td>
        </tr>
        <tr>
            <td>Dec 18</td>
            <td>Meet The People Behind jQuery</td>
            <td>John Resig</td>
            <td>announcement</td>
        </tr>
        <tr>
            <td>Dec 13</td>
            <td>Helping you understand jQuery</td>
            <td>John Resig</td>
            <td>tutorial</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th colspan="4">2005</th>
        </tr>
        <tr>
            <td>Dec 17</td>
            <td>JSON and RSS</td>
            <td>John Resig</td>
            <td>miscellaneous</td>
        </tr>
    </tbody>
</table>

With separate CSS styles applied to

elements within and , a snippet of the table might look like this:
To ensure that the alternating gray rows do not override the color of the subheading rows, we need to adjust the selector expression:

$(document).ready(function() { 
 
$('table.striped tbody tr:not([th]):odd').addClass('odd'); 
 
$('table.striped tbody tr:not([th]):even').addClass('even'); 
 
});

The added selector, :not([th]), removes any table row that contains a

from the matched set of elements. Now the table will look like this:

Tags

Trackback(0)

TrackBack URI for this entry

Comments (0) add comment

add comment

Subscribe to this comment's feed

Show/Hide comments

Write comment

Show/Hide comment form

Learning jQuery - Advanced Row Striping

As we saw earlier in the chapter, row striping can be as simple as two lines of code to alternate the background color:

$(document).ready(function() { 
 
$('table.sortable tbody tr:odd').addClass('odd'); 
 
$('table.sortable tbody tr:even').addClass('even'); 
 
});

If we declare background colors for the odd and even classes as follows, we can see the rows in alternating shades of gray:

tr.even { 
 
background-color: #eee; 
 
} 
 
tr.odd { 
 
background-color: #ddd; 
 
}

While this code works fine for simple table structures, if we introduce non-standard rows into the table, such as sub-headings, the basic odd-even pattern no longer suffices. For example, suppose we have a table of news items grouped by year, with columns for date, headline, author, and topic. One way to express this information is to wrap each year's news items in a

< Prev		Next >

[ Back ]

Exforsys Offers

© 2008 Exforsys.com

Joomla! is Free Software released under the GNU/GPL License.