Updated Mar 08, 2007 by racklin
Labels:	Phase-Implementation

ZebraTableExtension

Zebra Table Extension Usage Example.

Introduction

Zebra Table making all tables on a page have striped (”Zebra”) backgrounds (different coloring on every odd row). Making all tables on a page have striped (”Zebra”) backgrounds (different coloring on every odd row).

Details and Options

By default, your table with id='zebra' will striped ("Zebra") backgrounds. You can Custom Setup table id and css to be used with jQWebExt.options.ZebraTable object. ex:

<script>
    jQWebExt.options.ZebraTable['zebra1'] = {even: 'even_1', odd: 'odd_1'};
    jQWebExt.options.ZebraTable['zebra2'] = {even: 'even2', odd: 'odd2'};
</script>

Html and Usage

<html>
<head>
    <script src="../src/jquery.pack.js" type="text/javascript"></script>
    <script src="../src/jqwebext.js" type="text/javascript"></script>
    <script src="../src/jqwebext.zebratable.js" type="text/javascript"></script>
<style>
.even { background: #FFFFCC; }
.odd { background: #FFFF99; }
</style>
</head>
<body>
<table id="zebra">
    <tr>
        <td>1</td><td>11</td>
    </tr>
    <tr>
        <td>2</td><td>22</td>
    </tr>
</table>
</body>
</html>

Source

Source of jqwebext.zebratable.js. Just sample for Javascript extension programmer. Web desinger no need to know about this source.

jQWebExt.ZebraTable = function(opt) {

    for (var tableId in opt) {
        var qStrOdd = '#'+tableId + ' tr:nth-child(odd)';
        var qStrEven = '#'+tableId + ' tr:nth-child(even)'; 
        if(typeof(opt[tableId]['odd']) == 'string' && opt[tableId]['odd'].length>0) jQuery(qStrOdd).addClass(opt[tableId]['odd']);
        if(typeof(opt[tableId]['even']) == 'string' && opt[tableId]['even'].length>0) jQuery(qStrEven).addClass(opt[tableId]['even']);
    }

};

// Register Zebra Table Plugin
jQWebExt.register('ZebraTable' ,  {
        zebra: {even: 'even', odd: 'odd'}
});

DEMO

http://jqwebext.googlepages.com/test-zebra.html