Rayage du zèbre

Questions ou commentaires?

Needs translation

The striped rows functionality is provided from Twitter Bootstrap CSS


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

Use when

  • To style special relationship in table
  • To provide a column hovering effect to the user, when appropriate

Do not use when

  • For styling table that are not conform at the 12 technique for tables

Working example



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.


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

Event Trigger What it does
wb-init.wb-zebra 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

Date de modification :