--- { "title": "Zebra Striping", "language": "en", "category": "Plugins", "categoryfile": "plugins", "description": "Zebra Striping for table", "altLangPrefix": "zebra", "dateModified": "2014-08-04" } ---

The striped rows functionality is provided from Twitter Bootstrap CSS

Purpose

Style special relationship between cell, vector (row/col) and group (tbody/colgroup). It also simulate a column hovering effect for table.

Use when

Do not use when

Working example

English:

French:

How to implement

  1. Make your table conform at the 12 techniques for tables
  2. Add a class="wb-zebra" element to the table. 
    <table class="wb-zebra">
  3. (Optional) Activate the indicator that your tables contains data summaries 
    <table class="wb-zebra hassum">
  4. (Optional) Activate the column hovering effect 
    <table class="wb-zebra wb-zebra-col-hover">

Configuration options

There is no customizable configuration options.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb- Triggered manually (e.g., $( ".wb-zebra" ).trigger( "wb-init.wb-zebra" );). Load table parser dependency and initiate the complex table parsing.
wb-ready.wb-zebra (v4.0.5+) Triggered automatically after the Zebra plugin initializes. Used to identify where the Zebra plugin initialized (target of the event) 
$( document ).on( "wb-ready.wb-zebra", ".wb-zebra", function( event ) {
});
$( ".wb-zebra" ).on( "wb-ready.wb-zebra", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});
passiveparse.wb-tableparser When the zebra plugin initiate the complex table parsing. It will parse the data table and attach the information to a data attribute named "tblparser" on every elements inside and on to the table elements.
parsecomplete.wb-tableparser When the table parser has completed his parsing. It's means that the "tblparser" data attribute is now ready to be use.

Source code