jquery.table-expander.js

/*! Table Expander jQuery Plugin | (c) 2014 rakuishi | MIT license */
;(function($) {
  $.fn.tableExpander = function(options) {
 
    var defaults = {
      'expandClassName' : 'expand',
      'backgroundColor' : 'transparent',
      'hoverBackgroundColor' : '#f0f0f0',
    };
    var setting = $.extend(defaults, options);
 
    var trArray = $('> tbody tr', this);
 
    function onExpand(event) {
      for (var i = event.data.num + 1; i < trArray.length; i++) {
        if (trArray[i].className === setting['expandClassName']) { break; }
        if ($(trArray[i]).is(':hidden')) {
          $(trArray[i]).show();
        } else {
          $(trArray[i]).hide();
        }
      }
    }
 
    for (var i = 0; i < trArray.length; i++) {
      if (trArray[i].className === setting['expandClassName']) {
        $(trArray[i])
          .bind('click', {num: i}, onExpand)
          .css('cursor', 'pointer')
          .css('background-color', setting['backgroundColor'])
          .mouseout(function() { $(this).css('background-color', setting['backgroundColor']); })
          .mouseover(function() { $(this).css('background-color', setting['hoverBackgroundColor']); });
      } else {
        $(trArray[i]).hide();
      }
    }
  };
})(jQuery);